Vue 未使用 unshift 正确更新 ARRAY答案

【问题标题】：Vue not updating ARRAY properly using unshiftVue 未使用 unshift 正确更新 ARRAY
【发布时间】：2018-03-02 01:30:11
【问题描述】：

请帮助我！！！！！

当我的应用程序启动时，我运行一个 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);

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

我有图片要展示：

第一篇文章：

picture of the first post

第二个帖子：

picture of the second post

【问题讨论】：

模板是什么样子的？
<template> <div class = "col-xs-12 col-md-5 mt-m pr-sm pl-sm"> <timeline-headline></timeline-headline> <div class="panel panel-default"> <div class="panel-body"> <feed-constructor :timeline-id = "id" @newFeedSent = "captureFeed"></feed-constructor> <feed v-for = "feed in feedData" :feedContent="feed"></feed> </div> </div> </div> </template>
尝试在您正在循环的feed 上使用key。 :key="feed.id" 其中feed.id 是每个提要的一些唯一值。
现在让我试试。将在 2 分钟内回复您
hmm.. 我在使用提要 ID 的地方做了类似的事情。 <feed v-for = "feed in feedData" :id="'feed-'+feed.id" :feedContent="feed"></feed> 不确定如何使用动态密钥或动态提要 id 来解决此问题，正在尝试解决此问题

标签： laravel vue.js duplicates vuejs2 axios

【解决方案1】：

您是否在模板中使用了关键参数？像这样？

 :key="<An ID>"

例如：

<div  v-for="(item, index) in array" :key="item.id">
  {{index}} - {{item.name}}
</div>

【讨论】：

谢谢@Lucas，你的权利:key="<An ID>" 帮助解决了这个问题，不知道，去研究和了解更多

【解决方案2】：

这里的主要问题是当你循环一个组件时，你是required to use a key。

在 2.2.0+ 中，当对组件使用 v-for 时，现在需要一个键。

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

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

其中feed.id 是每个提要对象中的唯一值。这是因为 Vue 的 DOM 更新策略。使用密钥有助于 Vue 确定需要创建/销毁哪些组件。

【讨论】：