如果在陣列中找到單詞，則Vue.js按下拉串列過濾（僅不完全匹配）

https://jsfiddle.net/75f3c2po/

即使有逗號分隔其他單詞，如何通過下拉匹配使上述 Vue.js 代碼過濾器與整個陣列匹配？現在它只匹配，type: BMW但我希望它也顯示可能具有類似type: BMW, Ford.

另外，我是 Vue 的超級新手，希望有人也可以告訴我如何在select選擇選項后立即更新它而不必點擊“搜索”按鈕？

非常感謝

uj5u.com熱心網友回復：

為了能夠按型別查找，您可以用逗號分割型別字串，并檢查陣列是否包含該值：

      this.searchResult = this.items.filter(function(item) {
        let filtered = true
        if (filterType) {
          filtered = item.type.split(',').includes(filterType)
        }
        if (filtered) {
          if (filterCountry && filterCountry.length > 0) {
            filtered = item.country == filterCountry
          }
        }
        if (filtered) {
          if (filterYear && filterYear.length > 0) {
            filtered = item.year == filterYear
          }
        }
        return filtered
      })

為了能夠立即搜索，您可以@change在選擇上使用處理程式：

<select v-model="selectedType" @change="search">

uj5u.com熱心網友回復：

我根據您的小提琴在下面提供了一個片段。

將您的searchResults屬性更改為計算屬性，以便在檢測到selectedType,selectedCountry或 中的更改時自動更新selectedYear。

要檢查型別，我會首先拆分您的 csv 串列，然后檢查該型別是否存在于該陣列中。我已經這樣做了item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;

確保您了解 Vue 的基礎知識并閱讀Computed Properties and Watchers

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    selectedCountry: '',
    selectedYear: '',
    items: [{
        name: 'Nolan',
        type: 'mercedes, ford',
        year: '2020',
        country: 'england'
      },
      {
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country: 'belgium'
      },
      {
        name: 'John',
        type: 'bmw, audi',
        year: '2019',
        country: 'england'
      },
      {
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england'
      }
    ],
  },
  computed: {
    searchResult: function() {
      let filterType = this.selectedType,
        filterCountry = this.selectedCountry,
        filterYear = this.selectedYear

      return this.items.filter(function(item) {
        let filtered = true
        if (filterType && filterType.length > 0) {
          filtered = item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;
        }
        if (filtered) {
          if (filterCountry && filterCountry.length > 0) {
            filtered = item.country == filterCountry
          }
        }
        if (filtered) {
          if (filterYear && filterYear.length > 0) {
            filtered = item.year == filterYear
          }
        }
        
        return filtered;
      })
    }
  }
})

.list-item {
  margin-top: 50px;
}

.card {
  box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.16);
  width: 400px;
  padding: 20px 30px;
  margin-bottom: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selectedType">
    <option value="" disabled selected hidden>Type</option>
    <option value="mercedes">Mercedes</option>
    <option value="bmw">BMW</option>
  </select>

  <select v-model="selectedCountry">
    <option value="" disabled selected hidden>Country</option>
    <option value="belgium">Belgium</option>
    <option value="england">England</option>
  </select>

  <select v-model="selectedYear">
    <option value="" disabled selected hidden>Year</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
  </select>

  <div class="list-item" v-for="item in searchResult">
    <div class="card">
      <p>Name: {{ item.name }}</p>
      <p>Car: {{ item.type }}</p>
      <p>Year: {{ item.year }}</p>
      <p>Country: {{ item.country }}</p>
    </div>
  </div>
</div>

標籤：javascript Vue.js 筛选

上一篇：BootstrapModal不會出現

下一篇：javascript計算器無法從表單中獲取值