Сбросить отфильтрованные данные Vue.js - PullRequest
Новая
       17

Сбросить отфильтрованные данные Vue.js

0 голосов

Мне нужно реализовать кнопку, которая будет отбрасывать фильтры в моем приложении.Приложение написано на Vue.Сами фильтры были реализованы, но я не знаю, как реализовать их сброс. 

<template>
  <div id="app">
    <input type="text" v-model="search">
    <select name="sort" v-model="sort">
      <option v-for="option in options" :value="option.value" :label="option.label"></option>
    </select>
    <table>...</table>
  </div>
</template>

<script>
  import goodsList from './api/data';

  export default {
    name: 'app',
    data() {
      return {
        search: '',
        sort: '',
        options: [
          { label: 'Default', value: 'none' },
          { label: 'Brand', value: 'brand' },
          {label: 'Price', value: 'price'}
        ],
        goods: goodsList,
      }
    },
    computed: {
      filteredList() {
        let filteredGoods = this.goods.filter( item => {
          return item.name.toLowerCase().includes(this.search.toLowerCase());
        });
        switch (this.sort) {
          case 'brand':
            filteredGoods.sort((a, b) => a.brand.localeCompare(b.brand));
            break;
          case 'price':
            filteredGoods.sort((a, b) => parseInt(a.price - b.price));
            break;
        }
        return filteredGoods;
      }
    },
  }
</script>

1 Ответ

1 голос
/ 09 июля 2019

Вам понадобится функция сброса, которая назначит выбранное по умолчанию значение, например: «none» для v-модели «sort».Поскольку это двусторонняя привязка, изменение значения переменной sort в конечном итоге приведет к сбросу выбранной опции.

Добавляемая функция: 

resetOptions: function () {  
  this.sort='none';

}

Ссылка ниже https://jsfiddle.net/RohanPatil/68wced20/9/

...