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对象

1 个答案: