2

Estou com dificuldade para filtrar os dados a serem exibidos em um select html. Como posso aplicar um filtro que com base em uma variável (que será preenchida por um outro select) retorne todos os item.name que correspondam por exemplo a 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'}
     ]
  },

})
1
  • tentou usar um v-if ao lado do v-for? 14/03/2019 às 11:48

2 Respostas 2

0

Você pode usar a função filter do js

solução: 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;
    }
  }
})
0

Utilizando o método filter, você filtra o array e utiliza o seu retorno da maneira que desejar:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .