未设置 Vue2 对象

Question

我正在尝试从服务器获取数据列表并显示它，但看起来 Vue 看不到新数据（不是让它们响应）

      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",
});

我也尝试使用

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

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

但它仍然不适合我。感谢您的帮助！

Answer 1

您在 then 和 catch 回调中丢失了上下文。结果，您正在设置 window.videos 变量（全局）而不是组件实例 videos 属性（与 error 相同）。

简单的解决方法是使用 arrow functions 来保留词法绑定：

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

未设置 Vue2 对象

Vue2 object not setted

javascript

vue-component

vuejs2