Я пытаюсь перерисовать мое представление в vuejs всякий раз, когда я нажимаю на флажок. Я фильтрую данные методом перед рендерингом представления, и это прекрасно работает. Что не работает, так это обновление представления по клику. Ниже приведен код с некоторыми записями консоли, которые я использовал для проверки того, что оператор if работает, но я не уверен, обновляется ли массив данных.
const storeListVm = new Vue({
el: '#stock-status',
data() {
return {
stores: []
};
},
computed: {
orderedStores: function() {
return this.stores.sort(compare);
},
inStockStores: function() {
return this.stores.filter(function(store) {
return store.stock;
});
}
},
methods: {
showOnlyInStock: function() {
return this.stores.filter(function(store) {
console.log($('.js-stock-only:checked').length);
if ($('.js-stock-only:checked').length) {
console.log('trigger in stock');
return store.stock;
} else if(!$('.js-stock-only:checked').length) {
console.log('trigger no stock');
return store;
}
});
}
}
});
<section id="stock-status">
<span class="stock-status__search-opts--count" v-cloak>({{inStockStores.length}})</span>
<input type="checkbox" class="visually-hidden js-check-input js-stock-only" checked hidden v-on:click="showOnlyInStock">
<div class="store-list" id="store-list">
<div class="store-list__store" v-for="store in showOnlyInStock(orderedStores)" :key="store.id"></div>
</div>
</section>