[Vuejs]-Using v-for with nested object in Vue

by

3👍

✅

You can create a computed property for this:

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      itemlist: {
        "dates": [
          "2019-03-15",
          "2019-04-01",
          "2019-05-15"
        ],
        "id": [
          "arn21",
          "3sa4a",
          "wqa99"
        ],
        "price": [
          22,
          10,
          31
        ]
      }
    };
  },
  computed: {
    // Note: here I assume these arrays will always have the same length
    mergedList() {
      return this.itemlist.dates.map((dates, i) => {
        return {
          dates,
          id: this.itemlist.id[i],
          price: this.itemlist.price[i]
        };
      });
    }
  }
});

var vm = new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <ul>
    <li v-for="i in mergedList" :key="i.id" :price="i.price" :dates="i.dates">
      {{i.id}} - ${{i.price}} ({{i.dates}})
    </li>
  </ul>
</template>
👤blex

Leave a comment