title: Search and filter features still doesn't work properly (Vue JS)
body: <p>I'm figuring out how my search and filter features can work properly.
  I created a search feature and filter from search results by <code>stock</code>, <code>distance</code>, <code>price</code>, and <code>time response</code>. My search feature is running well. However, the filter feature that I made still doesn't work.</p>
  <p>I want after I do a search, and want to filter the search further, there are options like stock and distance when one of the dropdowns changes, the search result item also changes based on the filter (for example: stock) is available or not.
  And there are also other filters such as price and time response. When I click on price, the items will be sorted according to the lowest price to the highest price. And when I click the time response, the search items will be in order from fast to late response.</p>
  <p><strong>Example Case</strong></p>
  <p>In <code>Type</code>, i choose <code>BMW</code>. And then i click search button. There will show 2 item results with type <code>BMW</code>. And then, in a filter <code>Distance</code> i choose <code>500 KM</code>. It should, show only 1 result. But the filters not work.</p>
  <p>And if there are 6 item result, and i click <code>price</code> the item will be sorted from the lowest price to the highest price</p>
  <p>I have made the code like the one below, can anyone help me solve this problem?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data: {
      selectedType: '',
      selectedCountry: '',
      selectedYear: '',
      selectedStock:'',
      selectedDistance:'',
      items: [{
          name: 'Carthy',
          type: 'mercedes',
          year: '2020',
          country: 'england',
          stock: 'available',
          distance: '500',
          price: '1900',
          response: 'fast'
        },
              {
          name: 'Holand',
          type: 'mercedes',
          year: '2020',
          country: 'england',
          stock: 'available',
          distance: '500',
          price: '1050',
          response: 'fast'
        },
        {
          name: 'Nolan',
          type: 'mercedes',
          year: '2020',
          country: 'england',
          stock: 'available',
          distance: '500',
          price: '1000',
          response: 'fast'
        },
        {
          name: 'Edgar',
          type: 'bmw',
          year: '2020',
          country: 'belgium',
          stock: 'available',
          distance: '5000',
          price: '1200',
          response: 'fast'
        },
        {
          name: 'John',
          type: 'bmw',
          year: '2019',
          country: 'england',
          stock: 'available',
          distance: '500',
          price: '1500',
          response: 'fast'
        },
        {
          name: 'Axel',
          type: 'mercedes',
          year: '2020',
          country: 'england',
          stock: 'sold',
          distance: '500',
          price: '1600',
          response: 'late'
        }
      ],
      searchResult: [],
      itemsToShow: 2,
      totalItems: 0,
      sortByPrice: true,
      sort: 'price',
      sortByTime: true,
      sort: 'time'
    },
    computed:{
      filterItem: function() {
        let filterStock = this.selectedStock,
          filterDistance = this.selectedDistance
  
        return this.searchResult.filter(function(item) {
          let filtered = true
          if (filterStock &amp;&amp; filterStock.length &gt; 0) {
            filtered = item.stock == filterStock
          }
          if (filtered) {
            if (filterDistance &amp;&amp; filterDistance.length &gt; 0) {
              filtered = item.distance == filterDistance
            }
          }
          return filtered
        })
      }
    },
    methods: {
      search: function() {
        let filterType = this.selectedType,
          filterCountry = this.selectedCountry,
          filterYear = this.selectedYear
  
        this.itemsToShow = 2;
        
        this.searchResult = this.items.filter(function(item) {
          let filtered = true
          if (filterType &amp;&amp; filterType.length &gt; 0) {
            filtered = item.type == filterType
          }
          if (filtered) {
            if (filterCountry &amp;&amp; filterCountry.length &gt; 0) {
              filtered = item.country == filterCountry
            }
          }
          if (filtered) {
            if (filterYear &amp;&amp; filterYear.length &gt; 0) {
              filtered = item.year == filterYear
            }
          }
          return filtered
        })
      },
      priceSort: function(){
          this.sortByPrice = !this.sortByPrice
        if(this.sortByPrice)
        this.sort = 'price'
      },
      timeSort: function(){
          this.sortByTime = !this.sortByTime
        if(this.sortByTime)
        this.sort = 'time'
      }
    },
    mounted() {
      this.search()
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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{
    border:none;
    padding: 10px 15px;
    background-color:#c1c1c1; 
    border-radius:10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.1/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;div class="search-box"&gt;
      &lt;select v-model="selectedType"&gt;
        &lt;option value="" disabled selected hidden&gt;Type&lt;/option&gt;
        &lt;option value="mercedes"&gt;Mercedes&lt;/option&gt;
        &lt;option value="bmw"&gt;BMW&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select v-model="selectedCountry"&gt;
        &lt;option value="" disabled selected hidden&gt;Country&lt;/option&gt;
        &lt;option value="belgium"&gt;Belgium&lt;/option&gt;
        &lt;option value="england"&gt;England&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;select v-model="selectedYear"&gt;
        &lt;option value="" disabled selected hidden&gt;Year&lt;/option&gt;
        &lt;option value="2019"&gt;2019&lt;/option&gt;
        &lt;option value="2020"&gt;2020&lt;/option&gt;
      &lt;/select&gt;
      
      &lt;button @click="search"&gt;Search&lt;/button&gt;
    &lt;/div&gt;
    
    &lt;div class="filter-box"&gt;
      &lt;h6&gt;Filter:&lt;/h6&gt;
      &lt;select v-model="selectedStock" @change="filterItem"&gt;
        &lt;option value="" disabled selected hidden&gt;Stock&lt;/option&gt;
        &lt;option value="sold"&gt;Sold&lt;/option&gt;
        &lt;option value="available"&gt;Available&lt;/option&gt;
      &lt;/select&gt;
      
      &lt;select v-model="selectedDistance" @change="filterItem"&gt;
        &lt;option value="" disabled selected hidden&gt;Kilometers&lt;/option&gt;
        &lt;option value="500"&gt;500 KM&lt;/option&gt;
        &lt;option value="5000"&gt;5000 KM&lt;/option&gt;
        &lt;option value="10000"&gt;10.000 KM&lt;/option&gt;
      &lt;/select&gt;
      
      &lt;span class="price" @click="priceSort"&gt;Price&lt;/span&gt;
      &lt;span class="response" @click="timeSort"&gt;Time Response&lt;/span&gt;
      
    &lt;/div&gt;
  
    &lt;section class="result"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row list-item" v-for="(item, id) in searchResult" :key="id"&gt;
            &lt;div class="col-3 card" v-if="id &lt; itemsToShow"&gt;
              &lt;p&gt;Name: {{ item.name }}&lt;/p&gt;
              &lt;p&gt;Car: {{ item.type }}&lt;/p&gt;
              &lt;p&gt;Year: {{ item.year }}&lt;/p&gt;
              &lt;p&gt;Country: {{ item.country }}&lt;/p&gt;
              &lt;p&gt;Price: ${{ item.price }}&lt;/p&gt;
              &lt;p&gt;stock: {{ item.stock }}&lt;/p&gt;
              &lt;p&gt;distance: {{ item.distance }}&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        
          &lt;div class="row"&gt;
            &lt;div class="col-12"&gt;
              &lt;button @click="itemsToShow += 1"&gt;Load More&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>