How to use filters in vuejs for data collections?

Question

I’m having trouble filtering the data to be displayed in a select html. How can I apply a filter that based on a variable (which will be populated by another select) returns all.name items that match for example year = 2005?

<select>
    <option>Listar todos</option>
    <option v-for="item in items">{{ item.name }}</option>
</select>

Vuejs:

new Vue({

  el: '#app',

  data: {
     search: '',
     items: [
       {name: 'Stackoverflow', type: 'development', year: '2005'},
       {name: 'Game of Thrones', type: 'serie', year: '2005'},
       {name: 'Jon lim', type: 'actor', year: '2012'}
     ]
  },

})

Answer 1

You can use the js filter function

solution: https://jsfiddle.net/hogryj96/32/

<div id="app">
  <select @change="changeSelect">
    <option>Listar todos</option>
    <option v-for="item in items">{{ item.name }}</option>
 </select>
  <select>
    <option>Listar todos</option>
    <option v-for="item in secondSelectItems">{{ item.name }}</option>
 </select>
</div>



new Vue({
  el: "#app",
   data: {
     search: '',
     items: [
       {name: 'Stackoverflow', type: 'development', year: '2005'},
       {name: 'Game of Thrones', type: 'serie', year: '2005'},
       {name: 'Jon lim', type: 'actor', year: '2012'}
     ],
     items2: [
       {name: 'Stackoverflow', type: 'development', year: '2005'},
       {name: 'Game of Thrones', type: 'serie', year: '2005'},
       {name: 'Jon lim', type: 'actor', year: '2012'}
     ],
     currentYear: null,
  },
  computed: {
  secondSelectItems() {
    return this.items2.filter((item)=> item.year === this.currentYear)
    }
    },
  methods: {
    changeSelect: function(e){
     this.currentYear = this.items[e.target.selectedIndex -1].year;
    }
  }
})

Answer 2

Using the method filter, you filter the array and use your return the way you want:

new Vue({

  el: '#app',

  data: {
    search: 'Listar todos',
    certos: [],
    errados: [],
    mostrarCertos: true,
    mostrarErrados: true,
    items: [
      {name: 'Stackoverflow', type: 'development', year: '2005'},
      {name: 'Game of Thrones', type: 'serie', year: '2005'},
      {name: 'Jon lim', type: 'actor', year: '2012'}
    ]
  },

  methods: {
    escolher(elementos) {
      let nomesCertos = [], nomesErrados = [];
      let visualCertos, visualErrados;
      
      this.items.filter(elemento => {
        if(elementos == elemento.year) {
          nomesCertos.push(elemento.name);
          
          visualCertos = true;
          visualErrados = false;
        }
      })
      this.certos = nomesCertos;
      this.errados = nomesErrados;
      this.mostrarCertos = visualCertos;
      this.mostrarErrados = visualErrados;
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <select @change="escolher(event.target.value)">
    <option>Filtrar por data</option>
    <option value="2005">2005</option>
    <option value="2012">2012</option>
  </select>

  <select>
    <option>Valor filtrado</option>
    <option v-if="mostrarCertos" v-for="nomes in certos">{{ nomes }}</option>
    <option v-if="mostrarErrados" v-for="nomes in errados">{{ nomes }}</option>
  </select>
</div>