Question

请帮助我!!!!!

当我的应用程序启动时，我运行ajax来获取所有的Feed。这些是我随后存储在我的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);
            });
        }
    },

奇怪的是，当我成功获取刚刚创建的新feed并尝试使用unshift将其添加到feed数组时由于某种原因，数组的第一个帖子是重复的，我永远不会看到新的发布直到我刷新页面。当我检查控制台日志时，我可以看到我得到了新的订阅源。有趣的是，当我使用

时

vm.feedData.push(response.data);

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

我有要显示的图片：

第一篇文章：

picture of the first 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。

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

在这种情况下，您的模板应如下所示：

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

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

Vue没有使用unshift正确更新ARRAY

2 个答案: