This single 'type' filter works but how would you turn this single select a 'Type' to multiple types with checkboxes? Ideally the items would have multiple types assignable, and work with an axios request to a separate json file, but single type and this json would do for now as I am only just learning.

new Vue({
  el: '#app',
  data: {
    selectedType: '',
    startDate:null,
    endDate:null,
    items: [
      {
        name: 'Nolan',
        type: 'mercedes',
        year: '2020',
        country: 'england',
        date: '08/01/2020'
      },
      {
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country:'belgium',
        date: '08/11/2020'
      },
      {
        name: 'John',
        type: 'bmw',
        year: '2019',
        country: 'england',
        date: '08/21/2020'
      },
      {
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england',
        date: '08/01/2020'
      }
    ]
  },
  computed: {
    filterItem: function () {
      
      let filterType = this.selectedType
      if (!filterType) return this.items;  // when filterType not selected

      let startDate = this.startDate && new Date(this.startDate);
      let endDate = this.endDate && new Date(this.endDate);
      
      return this.items.filter(item => {
        return item.type == filterType;
      }).filter(item => {
        const itemDate = new Date(item.date)
        if (startDate && endDate) {
          return startDate <= itemDate && itemDate <= endDate;
        }
        if (startDate && !endDate) {
          return startDate <= itemDate;
        }
        if (!startDate && endDate) {
          return itemDate <= endDate;
        }
        return true;  // when neither startDate nor endDate selected
      })
      
    }
  }
})

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

#app {
  position: relative;
  padding-bottom: 200px;
}

span {
  margin: 0 15px;
  cursor: pointer;
}

.filter-box {
  margin-top: 15px;
}

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

button {
  background-color: #1cf478;
  border: none;
  padding: 10px 25px;
  font-weight: bold;
  border-radius: 15px;
}

select,input {
  border: none;
  padding: 10px 15px;
  background-color: #c1c1c1;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app">
  <label for="">Type</label>
  <select v-model="selectedType">
    <option value="" disabled selected hidden>Type</option>
    <option value="mercedes">Mercedes</option>
    <option value="bmw">BMW</option>
  </select>
  
  <label for="">From</label>
  <input type="date" v-model="startDate">
  
  <label for="">To</label>
  <input type="date" v-model="endDate">
  
  <div  v-for="item in filterItem">
    <div >
      <p>Name: {{ item.name }}</p>
      <p>Car: {{ item.type }}</p>
      <p>Date: {{ item.date }}</p>
      <p>Country: {{ item.country }}</p>
    </div>
  </div>
</div>

CodePudding user response：

One straight forward way to achieve this is by using multiple attribute in your select element and to select multiple options user have to hold down the Ctrl (windows) or Command (Mac) button to select multiple options and then do filtering based on the multiple selection.

Demo :

new Vue({
  el: '#app',
  data: {
    selectedType: [],
    items: [
      {
        name: 'Nolan',
        type: 'mercedes',
        year: '2020',
        country: 'england',
        date: '08/01/2020'
      },
      {
        name: 'Edgar',
        type: 'bmw',
        year: '2020',
        country:'belgium',
        date: '08/11/2020'
      },
      {
        name: 'John',
        type: 'bmw',
        year: '2019',
        country: 'england',
        date: '08/21/2020'
      },
      {
        name: 'Axel',
        type: 'mercedes',
        year: '2020',
        country: 'england',
        date: '08/01/2020'
      }
    ]
  },
  computed: {
    filterItem: function () {
      let filterType = this.selectedType
      if (!filterType.length) return this.items;
      
      return this.items.filter(item => {
        return filterType.includes(item.type);
      })
      
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label for="">Type</label>
  <select v-model="selectedType" multiple="multiple">
    <option value="" disabled selected hidden>Type</option>
    <option value="mercedes">Mercedes</option>
    <option value="bmw">BMW</option>
  </select>
  
  <div  v-for="item in filterItem">
    <div >
      <p>Name: {{ item.name }}</p>
      <p>Car: {{ item.type }}</p>
      <p>Date: {{ item.date }}</p>
      <p>Country: {{ item.country }}</p>
    </div>
  </div>
</div>

Note : If you want to select multiple options using checkbox only then you can use any 3rd party libraries available in the market.