Buscador

Veamos como realizar un simple buscador de nuestras tareas.

Curso completo de VUE de cero a Experto!

Aprende Vue.js + Firebase + Node.js + MongoDB en un curso completo! Accede aquí

Basados en nuestro proyecto anterior, agregaremos:

Input Quasar

<q-input filled  label="Buscar..." v-model="filtro" />

Data

notasFiltradas: [],
texto: ''

Created

created(){
  this.listarTareas();
  this.notasFiltradas = this.tasks
},

Computed

computed:{
  filtro:{
    get(){
      return this.texto
    },
    set(value){
      console.log('filtro ejecutado!');
      value = value.toLowerCase();
      this.notasFiltradas = this.tasks.filter(nota => nota.texto.toLowerCase().indexOf(value) !== -1)
      this.texto = value
    }
  }
},

Reemplazar v-for

<q-card 
  class="row"
  flat bordered 
  v-for="(item, index) in notasFiltradas" :key="index">

# Buscador

# Input Quasar

# Data

# Created