访问另一个数组中的数组以使用 v-for

Question

我有一个array - 'items' 和objects，每个都包含一个array 和更多objects。 我想access 第二个数组'productPrices' 使用v-for。但是items.productPrices 对我不起作用。我应该以某种方式创建双循环吗？

HTML：

  <table>
    <tbody>
      <tr v-for="(element, index) in items.productPrices">
        <td>{{ element.name }}</td>
        <td>
          <span>{{ element.amount }}</span>
        </td>
        <td>
          {{ element.price }}
        </td>
      </tr>
    </tbody>
  </table>

JS：

new Vue({
  el: "#app",
  data: {
    items: [
      { 
        name: 'menu', 
        path: 'menu', 
        productPrices: [
          { amount: 100, price: 80.61, name: 'first' },
          { amount: 250, price: 72.10 },
          { amount: 500, price: 79.62 },
          { amount: 1000, price: 100.20 },
          { amount: 2500, price: 147.60 },
          { amount: 5000, price: 232.56 }
        ], 
        quantity: 0 
      },
      { 
        name: 'Etui', 
        path: 'etui', 
        productPrices: [
          { amount: 100, price: 80.61, name: 'first' },
          { amount: 250, price: 72.10 },
          { amount: 500, price: 79.62 },
          { amount: 1000, price: 100.20 },
          { amount: 2500, price: 147.60 },
          { amount: 5000, price: 232.56 }
        ],
        quantity: 0 
      },
    ]
  }
})

这是fiddle。

Answer 1

只需将其包裹在 <template v-for="item in items"> 中

<div id="app">
      <table>
        <tbody>
        <template v-for="item in items">
          <tr v-for="(element, index) in item.productPrices">
            <td>{{ element.name }}</td>
            <td>
              <span>{{ element.amount }}</span>
            </td>
            <td>
              {{ element.price }}
            </td>
          </tr>
        </template>
        </tbody>
      </table>
</div>

更新你的 jsfiddle http://jsfiddle.net/khz30amb/7/

Answer 2

您可以通过以下方式做到这一点：-

<template>
    <v-container fluid px-4 py-0>
        <h4>Test</h4>
        <table>
            <tbody>
                <template v-for="(element, index) in items">
                    <tr v-for="newElement in element.productPrices" :key="index">
                        <td>{{ newElement.name }}</td>
                        <td>
                        <span>{{ newElement.amount }}</span>
                        </td>
                        <td>
                        {{ newElement.price }}
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </v-container>
</template>

Answer 3

因为在 javascript 中，您不能直接访问对象数组的属性，例如，如果您有上述情况：- 你有一个列表对象数组，你需要访问属性产品价格，你不能像 list.productPrices 那样访问它，你首先需要遍历更高阶的对象，然后只有你才能访问财产..

所以您需要首先在列表上使用 v-for，然后您可以访问属性 productPrices，然后您可以使用 v-for 对其进行迭代。

希望这能回答您的问题和疑虑。

Answer 4

虽然您可以使用 <template> ... </template> 做到这一点

正如另外两个人所回答的那样，如果您不想嵌套另一个循环，您可以将所有数据展平到一个数组中以供使用，除非您将其移至函数或类似内容，否则它不会那么漂亮.

方法如下：

<div id="app">
  <table>
    <tbody>
      <!-- <tr v-for="(element, index) in items.map(item => item.productPrices).reduce((joinedArrays, currentArray) => joinedArrays.concat(currentArray), [])"> -->
      <tr v-for='(element, index) in currentItem().productPrices'>
        <td>{{ element.name }}</td>
        <td>
          <span>{{ element.amount }}</span>
        </td>
        <td>
          {{ element.price }}
        </td>
      </tr>
    </tbody>
  </table>