Как правильно загружать различные массивы элементов в v-data-iterator от vuetify?

#javascript #vue.js #vue-component #vuetify.js

#javascript #vue.js #vue-компонент #vuetify.js

Вопрос:

 <v-data-iterator
   :items="isShop ? products : isFavorite ? favorites : shoppingCart"
   ...
   ... >

  

В скрипте у меня есть три кнопки, которые устанавливают все значения в false, кроме логического значения для массива, который я хочу иметь.
Вот так:

 openFavorite() {
  this.isShop = false;
  this.isCart = false;
  this.isFavorite = true;
},
        
  
 data: () => ({
  isShop: true,
  isFavorite: false,
  products: [],
  favorites: [],
  shoppingCart: [],
})
  

Что происходит сейчас, так это то, что при нажатии «Избранное» не отображается ни один из моих сохраненных продуктов. И выдает ошибку:

Недопустимый реквизит: не удалось выполнить проверку пользовательского валидатора для реквизита «justify».

Ответ №1:

Я протестировал ваш код в codepen, и это сработало, даже если массивы products и favorites оба пусты. 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>
  

Ответ №2:

Лучше использовать 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>