每当我点击一个复选框时,我都试图在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>
&#13;