title: Vue js Filters in List Rendering: Best Practices
body: <p>I'm studying VueJs and as programming allows multiple ways to get to the same result (some more or less elegant)...I'm pondering on what is the best way to filter lists.</p>
  
  <p>Here are a few ways i've noticed lists could be filtered:</p>
  
  <p>I will refer to this new Vue instance:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data() {
       return {
          selected:['diesel','petrol'],
  
  
   cars: [
      {
         "color": "blue",
         "type": "diesel",
      },
      {
         "color": "red",
         "type": "petrol",
      },
      {
         "color": "blue",
         "type": "diesel",
      },
      ]
    }
  }
  </code></pre>
  
  <p><strong>Method #1: the "v-show".</strong>
  Where any car type pushed into the "selected" array will be rendered.</p>
  
  <pre><code> &lt;div id="app&gt;
       &lt;span v-for="(car, key) in cars"
                      v-show="selected.includes(car.type)"
       &gt;
                  {{car.color}} &lt;br&gt;
                  {{joke.type}} &lt;br&gt;
       &lt;/span&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>Method #2: Using a computered Property and a filter</strong></p>
  
  <pre><code> &lt;div id="app&gt;
       &lt;span v-for="(car, key) in filteredCars"&gt;
                  {{car.color}} &lt;br&gt;
                  {{joke.type}} &lt;br&gt;
       &lt;/span&gt;
  &lt;/div&gt;
  
  computed: {
  
        filteredCars: function(){
               var selected = this.selected
  
               return this.cars.filter(function(car){
  
                   if (selected.indexOf(car.type) &gt;= 0) {
                          return joke.type
                   }
               }
        )}
     }
  </code></pre>
  
  <p>Any thoughts and best practices??</p>
  
  <p>Thanks again.</p>