Обновление представления в VueJS при вызове метода фильтра нажатием - PullRequest
0 голосов
/ 08 мая 2018

Я пытаюсь перерисовать мое представление в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...