根據 select 選項值過濾 Vue 列表

Question

我嘗試根據所選值使用 2 個 select 列表過濾我的列表。 我的計算過濾器似乎不起作用？

您應該能夠過濾“Price from”和“Price to”列表

List.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" />

如何綁定到一個 v-model 中的另一個屬性selectedTo以及我的過濾器有什么問題？

我還使用前綴“From”和“To”放在選項前面。

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' }
      ]
    }
  },

有沒有更優雅和 D.R.Y 的方法來做到這一點？

這是我到目前為止所擁有的沙盒。

Answer 1

您應該將 object 綁定到<price>組件上的v-model 。 通過這種方式，您可以將多個值傳入和傳出組件，而無需使用多個道具。

我還建議您將選擇中的value轉換為數字，以便更容易使用它們與您的價格進行比較。

您還在沙盒（ <price>組件）中定義了同名的數據屬性和計算屬性，這是不可能的。 因此，您應該刪除數據屬性並堅持計算的屬性來處理您的數據。

使用我建議的更改分叉您的沙箱。