改变全局变量列表时，在vue.js

Question

我需要两个周期创建表V-的

<tr v-for="(product, index) in mainOrderFood"> 
<tr v-for="(toping, i) in mainOrderFood[index]"> 
</tr> 
</tr> 

渲染，但如果你对viraible“索引”二线看，你会看到这个var没有索引的值，这个var监视全局范围。 我尝试做这样

<tr v-for="(product, index) in mainOrderFood"> <tr v-for="(toping, i) in product[index]"> </tr> </tr>

但VAR产品有一个像变种指数相同的范围内

我需要做的渲染阵列像

mainOrderFood: [ { name: 'name', props: [ {someprops: ''} ] } ]

Answer 1

据(index, product)实际上是什么。但在你的情况下不需要任何索引。

假设你的JSON看起来像这样

mainOrderFood: [ 
        { 
         name: 'name', 
         props: [ 
         {someprops: ''} 
         ] 
        } 
        ] 

那么你会v-for这样的：

<tr v-for="product in mainOrderFood"> 
    <tr v-for="toping in product.props"> 
    </tr> 
</tr> 

这里是一个JSFiddle

HTML：

<div id="vue-instance"> 
    <table> 
    <tr v-for="product in mainOrderFood"> 
    <th>{{ product.name }}</th> 
    <td v-for="toping in product.topings"> 
     {{ toping }} 
    </td> 
    </tr> 
    </table> 
</div> 

个JS：

var vm = new Vue({ 
    el: '#vue-instance', 
    data: { 
    mainOrderFood: [ 
     { 
     name: 'Spaghetti', 
     topings: [ 
      'Bolognese', 'Cheese' 
     ] 
     }, 
     { 
     name: 'Pizza', 
     topings: [ 
      'Pepperoni', 'Funghi' 
     ] 
     } 

    ] 
    } 
});