Vue unshift 只重复最后一项答案

【问题标题】：Vue unshift only repeats the last itemVue unshift 只重复最后一项
【发布时间】：2018-10-07 20:12:13
【问题描述】：

我的问题和这个问题一样：

https://laracasts.com/discuss/channels/vue/vue-unshift-only-repeats-the-last-item

我有一个这样的数组：

remate: {id:1, lotes: [{id:1, nombre: lalala}, {id:2, nombre: lololo}]}

当我尝试将新项目放入 remate.lotes 按预期工作时，它将新数据推送到数组的末尾，但我需要将数据放到数组的位置 0，这就是问题所在......数组是打破并再次放入我的最后一个数组结果。

这里有一段视频，可以准确地展示发生了什么，以便更好地理解并显示代码。

https://vimeo.com/266804712

我不明白问题出在哪里。

pd：我尝试将 :key 放入我的组件，但没有结果。

更新：

Page:
<loteForm :Remate="remate" key="loteFormNew"></loteForm>

<template v-for="(lote, index) in remate.lotes"> 
     <Lote :Remate="remate" :Lote="lote" :key="'lote' + index"></Lote>     
    <hr> 
</template>


Component loteForm:
export default {     
    name: 'Form',         
    components: {             
        'LoteFormClientes': LoteFormClientes,         
    },        
    props: {             
        Remate: {                 
            required: true,            
        },             
        Lote: {     
            required: false,     
        },        
    },         
    data () {        
        return {        
            form: new Form(this.Lote),       
        }     
    },       
    methods: {       
        async loteForm(){       
            this.form['remate_id'] = this.Remate.id;        
            const { data } = await this.form.post('/api/form/lote');     
            console.log(this.Lote);         
            if(this.Lote === undefined) {
                //work as expected
                this.Remate.lotes.push(data)              
                //not working
                this.Remate.lotes.unshift(data)              
            }                
        }       
   },      
}

【问题讨论】：

请在问题中包含您尝试使用的代码
请添加unshift()部分的代码
欢迎来到Stackoverflow，建议你把错误直接放在你的问题中，因为有些人在商业机器上，他们无法控制他们的音量，这是一个问题链接到视频，因为他们可能不知道视频或广告是否会发出声音。我还建议您引用有问题的其他站点的内容，因为这让很多人去那个站点查看问题，然后返回您的代码搜索然后返回...

标签： arrays vue.js vuejs2

【解决方案1】：

元素被添加到数组中，但它没有被渲染，因为 Vue 试图尽可能少地改变 DOM。

换句话说，使用绑定到每个元素的key。使用：

:key="'lote' + lote.id"

没有

:key="'lote' + index"

因为使用索引不好，因为数组中的第二个元素总是有lote1作为索引，无论它是什么值（当你.unshift一个新元素时，虽然位置1有一个新元素，索引没有改变，所以 Vue 不会重新渲染新元素）。

已更改v-for:

<template v-for="(lote, index) in remate.lotes">  
    <Lote :Remate="remate" :Lote="lote" :key="'lote' + lote.id"></Lote>
    <hr>
</template>

【讨论】：

我尝试将密钥 :key="'lote' + lote.id" 但它不起作用，我也需要将密钥放入 Lote 的子组件中？
您需要将密钥放在v-for'ed 的组件中。你确定lote.ids 是独一无二的吗？
是的，它是一个自动增量 bd：
感谢 acdcjunior，:key 选项是我需要了解更多如何实现该组件的解决方案，因为我的项目非常混乱，它使 vuejs 重用相同的对象...