arrays - vue unshift 只重复最后一项

Question

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

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)
             
            }                
        }
      
   },
     
}
      

Answer 1

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

换句话说，使用绑定(bind)到每个元素的键。使用:

: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>