Как сделать фильтр на Vue.js по клику?

Question

[Илья Фёдоров]

Имеется live-фильтр с использованием Vue2Filters. Значение из v-model подставляется в функцию filterBy().
Можно ли как-то применять фильтр только при нажатии кнопки "ФИЛЬТР"?

input(type="text",class='filter_tags form-control',v-model="input",autofocus='')
button.searchBtn(type="button") ФИЛЬТР
br
table(:id="getTableClass")#table-tagsdata.table.table-tags.table-bordered
    tr
       th(v-for='tth in tagshead') {{tth}}
    template(v-for='tagObj in filterBy(tagsdata, input)')

Answer 1

[Evgeny Kulakov]

Можно добавить еще одну переменную в data компонента и в обработчике кнопки присваивать ей значение из инпута:

button.searchBtn(type="button" @click="some_value=input") ФИЛЬТР

Здесь

template(v-for='tagObj in filterBy(tagsdata, input)'

изменить на

template(v-for='tagObj in filterBy(tagsdata, some_value)'

Comments

[Илья Фёдоров]

Спасибо!
Хорошо, я добавил событие click, в template также произвел замену и в корневом компоненте (#station) в функцию data добавил переменную.

data: function() {
      return {
        search_value: ''
      };
 }

Получаю ошибку: bundle.js?v1.102:679 [Vue warn]: Property or method "search_value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in )

Можете ли, что-то подсказать?)

[Evgeny Kulakov]

Хм, странно..Он как бы намекает, что нет этой переменной в дате. Нужно смотреть, где вы ее объявили в коде, может опечатка или еще что-то.

[Илья Фёдоров]

Evgeny Kulakov: угу, вот код:

Vue.component("station", {
    template: "#station",
    props: {
      input: "",
      station: {},
      folders: {},
      tagsdata: {},
      tagshead: {}
    },
    computed: {
      getTableClass: function() {
        return "table_station_" + this.station._id;
      }
    },
    data: function() {
      return {
        search_value: ''
      };
    }
  });

[Evgeny Kulakov]

Вдвойне странно) проверьте, что все сохранено, попробуйте пересобрать.
Вот практически ваш вариант, все норм работает: codepen.io/kerf/pen/XRdoox

[Илья Фёдоров]

Evgeny Kulakov: вижу, на youtube тоже посмотрел, вроде должно работать, но...нет.
В любом случае спасибо за помощь!

[Илья Фёдоров]

Владимир: :) Его выбрал не я, а тот человек, кто изначально делает этот проект.

Answer 2

[Илья Фёдоров]

Хорошо, спасибо Evgeny Kulakov! Чтобы получить рабочий фильтр по клику сделал вот что:

в template так и оставил input

template(v-for='tagObj in filterBy(tagsdata, input)')

в поле поиска в директиву v-model поставил свойство объекта data - search_value

input(type="text",class='filter_tags form-control',v-model="search_value",v-on:keyup.enter = "input=search_value", autofocus='')

в data также добавил еще и свойство input и того получилось:

data: function() {
      return {
        search_value: '',
        input: ''
      };
    }

В кнопке "ФИЛЬТР" по клику свойству input, по которому фильтруются значения присваиваю значение search_value из строки поиска:

input.searchBtn(type="button", v-on:click="input=search_value", value="ФИЛЬТР")

Comments

[Evgeny Kulakov]

Если не хотите заморачиваться с лишними переменными, можно напрямую получить значение из инпута:
codepen.io/kerf/pen/RVRbBg