改變全局變量列表時，在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' 
     ] 
     } 

    ] 
    } 
});