访问另一个数组内部的数组以使用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> ... </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>

Answer 2

只需将其包装在<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 3

您可以通过以下方式执行此操作：-

<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 4

因为在javascript中，您无法直接访问对象数组的属性，例如，如果您遇到上述情况：- 在这里，您有一个包含列表的对象数组，您需要访问属性产品价格，而不能像list.productPrices那样访问它，您首先需要遍历高阶对象，然后才可以访问属性。

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

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