javascript - Vue 2：组件中的 v-for 动态道具

Question

我有一个 Vue 组件，我在其中尝试对 props 传递的多数组 json 对象执行 v-for，该对象是动态的并且由父方法填充。

这里：

我的问题是在组件中我只看到数据的第一个对象：

但我在控制台没有错误，所以我不明白问题是什么......我必须在数据中观察吗？

这是我的代码：

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

零件

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

}   

});

Answer 1

您的数据listaSelezionati是一个对象数组数组： [[{one:one}],[{two,two}]]

当你这样做时：

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

您是在告诉 Vue 渲染第一个项目[{one:one}]，然后是该项目 {one:one} 中的索引。但是，由于它们似乎都是长度为 1 的数组，您可以这样做：

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