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