通过单击调用过滤器方法在VueJS中更新视图

时间:2018-05-08 07:57:04

标签: javascript html vue.js vuejs2

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

0 个答案:

没有答案