[Vuejs]-How to properly load different arrays of items into vuetify's v-data-iterator?

by

0👍

I tested your code in codepen and it worked even products and favorites arrays are both empty.
https://codepen.io/endmaster0809/pen/mdPRQrP

<v-btn class="primary my-2"  @click="openFavorite">View Favourite</v-btn>
<v-data-iterator
  :items="isShop ? products : isFavorite ? favorites : shoppingCart"
  :items-per-page.sync="itemsPerPage"
  hide-default-footer
>
  ...
  </v-data-iterator>

0👍

Better to use computed:

var app = new Vue({
  el: '#app',
  data: () => ({
    active: 'products',
    products: [1, 2, 3],
    favorites: [4, 5, 6],
    shoppingCart: [7, 8, 9],
  }),
  computed: {
    items() {
      return this[this.active]
    }
  }
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div> {{items}}
  </div>
  <button @click="active = 'favorites'">Set to 'favorites'</button>
</div>

Leave a comment