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>

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

Vue 2: v-for dynamic props in component

javascript

vue.js

v-for