Question

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

的表

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

但如果你在viraible'index'的第二行看到，你会看到这个var没有index的值，这个var watch在全局范围内。我试着这样做

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

    ]
  }
});

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

1 个答案: