Vue unshift 只重复最后一项

Posted 2023-02-22

【中文标题】Vue unshift 只重复最后一项

【英文标题】：Vue unshift only repeats the last item

【发布时间】：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()部分的代码

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

【参考方案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 重用相同的对象...