Accessing array inside of another array to use v-for

Question

I have an array - 'items' of objects and each of them contains an array of more objects. I would like to access the second array 'productPrices' to use v-for. But items.productPrices doesn't work for me. Should I create double loop somehow?

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 
      },
    ]
  }
})

Here is a fiddle.

items is an array you cannot access directly items.productPrices. you have to provide index like items[0].productPrices or you have to go through loop. — Bharat
– Bharat, Commented Jul 4, 2018 at 6:25
I guess, indeed, you will need to use two v-for loops. You could also first transform your data and then use one v-for, though I would not do that. — mvermand
– mvermand, Commented Jul 4, 2018 at 6:25

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

While you can do this with `<template> ... </template>`

as the other two people have answered, if you wish to not nest another loop you can flatten all of the data into one array to be used, it won't be as pretty unless you move it to a function or the like.

Here's how:

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 4, 2018 at 6:33

andria_girl

5,1053 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kabugh Over a year ago

Your answer is the most satisfying for me but I don't want to display all items. I've got a computed property currentItem and it allows me to find the current item. I would like to display productPrices for the current item.

andria_girl Over a year ago

Oh if you just want the current item all you need is (element, index) in items[currentItem].productPrices

kabugh Over a year ago

currentItem() { return this.items.find(item => item.path === this.$route.params.id) } This is computed.

andria_girl Over a year ago

Okay, so how about (element, index) in currentItem().productPrices

kabugh Over a year ago

When adding this question I already had this loop, but the only thing that was wrong was instead of items.productPrices, there should be currentItem.productPrices without ().

Victor Perez · Accepted Answer · 2018-07-04 06:26:52Z

0

just wrap it inside a <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>

update on your jsfiddle http://jsfiddle.net/khz30amb/7/

answered Jul 4, 2018 at 6:26

Victor Perez

4913 silver badges10 bronze badges

Comments

Shubham · Accepted Answer · 2018-07-04 06:28:25Z

0

You can do this by following way:-

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

answered Jul 4, 2018 at 6:28

Shubham

73812 silver badges34 bronze badges

Comments

Abhishek Sinha · Accepted Answer · 2018-07-04 06:30:55Z

0

since in javascript you cant directly access the properties of array of objects for example if you have a case as above :- where you have a array of objects that is list and you need to access the property product prices you can't just access it like list.productPrices you will first need to iterate over the higher order objects and then only you will have access to the property..

so what you will need to do is first use v-for over the list and then you can access the property productPrices and then you can iterate over it using v-for..

Hope this answers your question and doubts.

answered Jul 4, 2018 at 6:30

Abhishek Sinha

11 bronze badge

Collectives™ on Stack Overflow

Accessing array inside of another array to use v-for

4 Answers 4

While you can do this with `<template> ... </template>`

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

While you can do this with <template> ... </template>

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

While you can do this with `<template> ... </template>`