Фильтр Vue список на основе значения выбранной опции - PullRequest
Новая
       85

Фильтр Vue список на основе значения выбранной опции

0 голосов
/ 19 июня 2020

Я пытаюсь отфильтровать свой список двумя списками выбора на основе выбранного значения. Кажется, мой вычисленный фильтр не работает?

Вы должны иметь возможность фильтровать список по «Цена от» и «Цена до»

Список. vue Свойство вычисляемого фильтра: 

filteredData() {
  const LowerCaseSearch = this.search.toLowerCase();
  return this.products.filter(
    product =>
      (product.name.toLowerCase().includes(LowerCaseSearch) ||
        product.category.toLowerCase().includes(LowerCaseSearch)) &&
      (!this.checked.length || this.checked.includes(product.category)) &&
      (!this.selectedFrom.length || this.selectedFrom.includes(product.price)) &&
      (!this.selectedTo.length || this.selectedTo.includes(product.price))
  );
},

В моем зарегистрированном компоненте я использую v-model для привязки к вычисляемому свойству selectedFrom

<Price v-model="selectedFrom" />

Как привязать к другому свойству selectedTo в одной v-модели и что не так с моим фильтром?

Я также использую префиксы «От» и «Кому», чтобы поставить перед параметрами. 

data: () => {
    return {
      selectedFrom: '0,00',
      priceFrom: [
        { prefix: 'From', text: '0,00', value: '0,00' },
        { prefix: 'From', text: '200,00', value: '200,00' },
        { prefix: 'From', text: '400,00', value: '400,00' }
      ],
      selectedTo: 'No max',
      priceTo: [
        { prefix: 'To', text: '400,00', value: '400,00' },
        { prefix: 'To', text: '600,00', value: '600,00' },
        { prefix: 'To', text: '800,00', value: '800,00' },
        { text: 'No max', value: 'No max' }
      ]
    }
  },

Есть ли более элегантный и СУХОЙ способ сделать это?

Вот песочница , что у меня есть.

1 Ответ

0 голосов
/ 19 июня 2020

Вы должны привязать объект к вашему v-model в компоненте <price>. Таким образом, вы можете передавать несколько значений в свой компонент и из него без использования нескольких реквизитов.

Я также предлагаю вам преобразовать value в выбранных вами числах в числа, чтобы их было проще использовать для сравнения к вашим ценам.

Вы также определили свойства данных и вычисленные свойства в песочнице (компонент <price>) с тем же именем, это невозможно. Поэтому вам следует удалить свойства данных и придерживаться вычисленных для обработки ваших данных.

Вилка вашей песочницы с моими предложенными изменениями.

...