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: я пытаюсь поставить: ключ к моему компоненту, но без результатов.

Обновлен:

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 как можно меньше.

Другими словами, используйте 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>