Vue 未使用 unshift 正确更新 ARRAY

Question

请帮我！！！！！

当我的应用程序启动时，我运行一个 ajax 来获取我所有的提要。这些是我然后存储在作为数组的 vue 变量中的对象。

    props:['id'],
    data(){
        return {
            feedData: []
        } 
    },
    created(){
        axios.get('/feeds/'+this.id).then(response =>{
            this.feedData = response.data.data;
        });
    }

之后，当用户键入并发送新帖子时，我将新帖子存储在数据库中，然后发出一个事件以从数据库中捕获新帖子。这个功能在我的方法中。

    methods: {
        captureFeed: function (feedId) {
            const vm = this;
            axios.get('/feeds/'+this.id+'/'+feedId).then(response =>{
                vm.feedData.unshift(response.data);
                console.log(response.data);
            });
        }
    },

奇怪的是，当我成功获取我刚刚创建的新提要并尝试使用 unshift 将其添加到提要数组中时，由于某种原因，数组的第一篇文章被复制，直到我才看到新帖子刷新页面。当我检查控制台日志时，我可以看到我得到了新的提要。有趣的是，当我使用

vm.feedData.push(response.data);

它工作得很好，但帖子在最底部，这不是我想要的！

我有图片要显示：

第一个帖子：

第一个帖子的图片

第二个帖子：

第二个帖子的图片

Answer 1

这里的主要问题是，当您循环访问组件时，需要使用key。

在 2.2.0+ 中，当将 v-for 与组件一起使用时，现在需要密钥。

既然如此，您的模板应该如下所示：

<feed v-for="feed in feedData" :key="feed.id" :feedContent="feed"></feed> 

其中feed.id是每个 feed 对象中的唯一值。这是因为 Vue 的 DOM 更新策略。使用键可以帮助 Vue 识别需要创建/销毁哪些组件。