TypeError: this.$set is not a function

Question

Hi I am geting this error: Uncaught (in promise) TypeError: this.$set is not a function

And here is the code:

     export default {
        data: function() {
            return { movies: '' }
        },

        ready: function() {
            this.showMovies()
        },

        methods: {
            showMovies: function() {
                 this.$http.get(config.api.url + '/movies').then(function (response) {
                    this.$set('movies', response.data)
                 })
             }
        }
     }

Answer 1

The reason why this.$set is not a function in your example code is because this doesn't refer to Vue ViewModel instance anymore.

To make code you've posted working, you need to keep reference to it:

export default {
    data: function() {
        return { movies: '' }
    },

    ready: function() {
        this.showMovies()
    },

    methods: {
        showMovies: function() {
             var vm = this; // Keep reference to viewmodel object
             this.$http.get(config.api.url + '/movies').then(function (response) {
                vm.$set('movies', response.data)
             })
         }
    }
 }