Vue.js Filter by dropdown if word is found in array (not exact match only)-CodePudding

https://jsfiddle.net/75f3c2po/

How can I make the above Vue.js code filter by dropdown match to the entire array even if there's commas separating other words? Right now it only matches if the type: BMW but I'd like it to also show cards that might have something like type: BMW, Ford.

Also, I'm super new to Vue, was hoping someone could also show me how I could have it update as soon as a select option is selected without having to hit the "search" button?

Thanks so much

CodePudding user response：

To be able to find by type you could split your type string by a comma, and check if the array includes the value:

      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
      })

To be able to search immediately you could use @change handler on your selects:

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

CodePudding user response：

I've provided a snippet below based on your fiddle.

Changed your searchResults property to a computed property, so that it updates automatically when it detects a change in the selectedType, selectedCountry or selectedYear.

To check against the type, I would first split your csv list and then check if the type exists in that array. I've done that using item.type.split(',').map(x => x.trim()).indexOf(filterType) !== -1;

Make sure you understand the basics of Vue and read 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>