Vue 未使用 unshift 正确更新 ARRAY

Question

请帮助我!!!!!

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

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

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

    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 将其添加到提要数组时，由于某种原因，数组的第一个 post 被复制了，我在我刷新页面之前永远看不到新的 post。当我检查控制台日志时，我可以看到我得到了新的提要。有趣的是，当我使用

vm.feedData.push(response.data);

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

我有图片要显示：

第一post:

picture of the first post

秒post:

picture of the second post

Answer 1

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

 :key="<An ID>"

例如：

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

Answer 2

这里的主要问题是，当您在组件上循环时，您是 required to use a key。

In 2.2.0+, when using v-for with a component, a key is now required.

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

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

其中 feed.id 是每个供稿对象中的唯一值。这是因为 Vue 的 DOM 更新策略。使用键帮助 Vue 识别哪些组件需要 created/destroyed.

Vue 未使用 unshift 正确更新 ARRAY

Vue not updating ARRAY properly using unshift

duplicates

laravel

vue.js

axios

vuejs2