代码之家 › 专栏 › 技术社区 › kabugh

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

vue.js arrays javascript

kabugh · 技术社区 · 6 年前

我有一个 array - 'items' 属于 objects 每个都包含一个 array 更多 物体 . 我想 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 .

4 回复 | 直到 6 年前

Andria 6 年前

而你可以用 `<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>

Victor Perez 6 年前

把它包在里面 <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/

Shubham 6 年前

您可以通过以下方式进行此操作:

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

Abhishek Sinha 6 年前

因为在javascript中,您不能直接访问对象数组的属性,例如,如果您有上述情况: 如果您有一个列表对象数组,并且需要访问属性产品价格,那么您不能像list.product prices那样访问它,您首先需要遍历高阶对象,然后只有您才能访问该属性。

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

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

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

而你可以用 <template> ... </template>

而你可以用 `<template> ... </template>`