¿Puedo escribir un código de búsqueda de filtro con solo la función de datos y métodos?
trato de hacer esto:
var fil = new Vue ({ el: '#app', data: { search: '', proL: ['css', 'c++', 'cs#'], }, methods: { filter: function(){ var search_key = this.search.val(); this.proL.filter(function(){ this.proL.toggle(this.proL.text().indexOf(search_key) > -1); }); } } });y este es el codigo html
<div id="app"> <div > <input @keyup="filter()" type="text" v-model="search" placeholder="Search title.."/> </div> <div id="pro"> <h4 v-for="item in proL">{{item}}</h4> </div> </div>😅😅
Intente usar una propiedad computed para definir los elementos filtrados y use una función de flecha como devolución de llamada de función de filter para obtener acceso a this :
new Vue({ el: '#demo', data: { search: '', proL: ['css', 'c++', 'cs#'], }, computed: { filtered(){ return this.proL.filter(e => e.toLowerCase().includes(this.search.toLowerCase())) } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div > <input type="text" v-model="search" placeholder="Search title.."/> </div> <div id="pro"> <h4 v-for="item in filtered">{{item}}</h4> </div> </div>Un mejor enfoque sería usar un controlador computed
new Vue({ el: '#demo', data: { search: '', proL: ['css', 'c++', 'cs#'], }, computed: { filteredProL(){ if(this.search === '') return this.proL; // If search input is empty then display all items else return this.proL.filter(e => e.toLowerCase().indexOf(this.search) > -1) // Working logic } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div > <input type="text" v-model="search" placeholder="Search title.."/> </div> <div id="pro"> <h4 v-for="item in filteredProl">{{item}}</h4> </div> </div>