Vue2 object not setted

Question

I'm trying to get list of data from server and show it, but looks like Vue do not see new data(not make them reactive)

      Vue.component('Videos', {
            template:
                `
                <div>
                    <div v-for="video in videos" v-text="video.name">
                    </div>
                <div>
            `,
            data() {
                return {
                    videos: {},
                }
            },
            methods: {
                getVideos() {
                    axios.get('/admin/videos?token='+localStorage.getItem('auth_token'))
                        .then(function(response) {
                            this.videos = response.data.videos;
                        }).catch(function(errors){
                            this.error = errors.data;
                    })
                },
            },
            created: function () {
                this.getVideos();
            }

        });

    new Vue({
        el: "#app",
});

Also I try to use

Object.keys(response.data.videos).forEach( key => this.$set(this.videos, key, response.data.videos[key]) );

and this.videos = Object.assign({}, this.videos, response.data.videos)

but it's still not work for me. Thanks for helping!

dfsq · Accepted Answer · 2017-01-25 12:16:59Z

1

You are loosing context in both then and catch callbacks. As the result, you are setting window.videos variable (global) instead of your component instance videos property (same with error).

Simple fix is to use arrow functions which preserve lexical binding:

methods: {
    getVideos() {
        axios.get('/admin/videos?token='+localStorage.getItem('auth_token'))
            .then(response => {
                this.videos = response.data.videos;
            }).catch(errors => {
                this.error = errors.data;
        })
    },
},

answered Jan 25, 2017 at 12:16

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bogdan Dubyk Over a year ago

Thanks it help. But why I can't write it without that ES2015 response => ??? from axios docs

axios.get('/user?ID=12345')   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   });

dfsq Over a year ago

Because when you use anonymous function function (response) { console.log(response); } execution context is global object (window). It's fine if you want to console.log, but in your case you want to set property of your component, so you need to have proper this. .then(function (response) { this.videos = response.data.videos; }.bind(this)) would work. Or you could also save reference to this and use it inside callback: const self = this; ... .then(function (response) { self.videos = response.data.videos; }).

Collectives™ on Stack Overflow

Vue2 object not setted

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related