Search code examples
javascriptvue.jsv-for

Vue 2: v-for dynamic props in component

I have a Vue component in which I'm trying to do a v-for of an multi array json object passed by props, this object is dynamic and is populated by a parent method.

Here:

enter image description here

My problem is that in the component i'm seeing only the first object of the data:

enter image description here

but I have no error in console, so I don't understand what the problem is... must I do a watch in data?

Here is my code:

<lista-percorso :selezionati="il_tuo_percorso"></lista-percorso>

COMPONENT

Vue.component('lista-percorso', {
template:`
        <div class="container" style="margin-top:30px;">
            <template v-if="listaSelezionati.length>0">         
            <div class="row" v-for="(selezionato,index) in listaSelezionati">
                <div>{{selezionato[index]}}</div>
            </div>      
            </template>
            <template v-else>
                <h5>NON HAI SELEZIONATO NESSUN SERVIZIO</h5>
            </template>
        </div>
    `,
props: ['selezionati'],
data: function(){
    return{
        listaSelezionati:this.selezionati
    }
},  
methods:{

}

});

Solution

  • Your data listaSelezionati is an Array of Arrays of Objects: [[{one:one}],[{two,two}]]

    when you go this:

    <div class="row" v-for="(selezionato,index) in listaSelezionati">
     <div>{{selezionato[index]}}</div>
</div>

    You are telling Vue to render the first item [{one:one}] and then the index in that item {one:one}. However, since they all appears to be arrays with length 1, you could do this:

    <div class="row" v-for="(selezionato,index) in listaSelezionati">
     <div>{{selezionato[0]}}</div>
</div>