CODEWITHSUNDEEP
arraysvue.jsvuejs2
Hansz
Hansz

Reputation: 75

Vue unshift only repeats the last item

My problem is same as this issue:

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

I have an array like this:

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

when I try put new items to remate.lotes the push work as expected, it push the new data to end of array but I need put the data to position 0 of array and here is the problem... the array is broken and put again my last array result.

Here a video to show exact what happen to understand better and show the code.

https://vimeo.com/266804712

I dont understand where is the problem.

pd: I try put :key to my component but without results.

Updated:

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


Upvotes: 3

Views: 1196

Answers (1)

acdcjunior
acdcjunior

Reputation: 135802

The element is being added to the array, but it is not being rendered because Vue tries to change the DOM as little as possible.

In other words, use a key that is bound to each element. Use:

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

Not

:key="'lote' + index"

Because using index is no good, as the second element in the array will always have lote1 as index, no matter it's value (and when you .unshift a new one, although there's a new element at position 1, the index didn't change, so Vue does not re-render a new element).

Changed v-for:

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

Upvotes: 4

Related Questions