vue.js - 在 vue.js 中渲染列表时更改全局变量

Question

我需要用两个循环 v-for 创建表

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

但是，如果您将在 virible 'index' 的第二行看到，您会看到这个 var 没有索引值，这个 var 在全局范围内监视。我试着做

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

但 var 产品与 var index 具有相同的范围

我需要做些什么来渲染数组

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'
        ]
      }

    ]
  }
});