cómo hacer filtros en vue.js

laravel-5.4

Question

Soy nuevo en vue.js.so quiero aplicar una cosa de filtro en mi proyecto. Intenté hacer esto de los últimos 2 a 3 días ... pero no pude ... puedo ayudarme a nadie a cómo hacer esto. .

Tengo 3 cuadros de entrada, uno es experiencia, expected_ctc y profile_role, dependiendo de estos 3 quiero mostrar los resultados.

Aquí está mi página js:

const app = new Vue({
el: ''#app'',
data() {
return {
page: 0,
itemsPerPage: 3,
}
},
components: { Candidate },
methods: {
//custom method bound to page buttons
setPage(page) {
this.page = page-1;
this.paginedCandidates = this.paginate()
},
paginate() {
return this.filteredCandidates.slice(this.page * this.itemsPerPage, this.page * this.itemsPerPage + this.itemsPerPage)
},
},
computed: {
//compute number of pages, we always round up (ceil)
numPages() {
console.log(this.filteredCandidates)
return Math.ceil(this.filteredCandidates.length/this.itemsPerPage);
},
filteredCandidates() {
//filter out all candidates that have experience less than 10
const filtered = window.data.candidates.filter((candidate) => {
if(candidate.experience === 5) {
return false;
}
return true;
})
console.log(filtered);
return filtered;
},
paginedCandidates() {
return this.paginate()
}
}
});

aquí están mis botones de la página de vista:

<div class="container">
<b>Experience:</b><input type="text" v-model="experience" placeholder="enter experience">
<b>Expected CTC:</b><input type="text" v-model="expected_ctc" placeholder="enter expected ctc">
<b>Profile Role:</b><input type="text" v-model="profile_role_id" placeholder="enter role">
<input type="button" name="search" value="search" >
</div>

Alguien puede ayudarme..

Gracias por adelantado..

Answer 1

Ok, comencemos con un ejemplo más pequeño. Digamos que tiene "Candidatos" que un candidato podría parecer

{
name: ''John Doe'',
expected_ctc: ''A'',
experience: ''B'',
profile_role_id: 1
}

De su estado actual, diría que tiene todos los candidatos en una matriz devuelta por laravel. Digamos que estamos en su plantilla actual donde tiene su aplicación vue

<div id="app">
<!-- lets start with one filter (to keept it clean) -->
<input type="text" v-model="experienceSearch"/>
<ul class="result-list">
<li v-for="result in candidatelist">{{ result.name }}</li>
</ul>
</div>

Y ahora a la secuencia de comandos

// always init your v-model bound props in data
// usually you wouldn''t take the candidates from the window prop. However, to keep it easy for you here I will stick to this
data: function() {
return {
experienceSearch: '''',
candidates: window.data.candidates
}
},
// the list that is displayed can be defined as computed property. It will re-compute everytime your input changes
computed: {
candidatelist: function() {
// now define how your list is filtered
return this.candidates.filter(function(oCandidate) {
var matches = true;
if (this.experienceSearch) {
if (oCandidate.experience != this.experienceSearch) {
matches = false;
}
}
// here you can define conditions for your other matchers
return matches;
}.bind(this));
}
}

Pasos generales:

• todos los candidatos están en datos -> candidatos
• los candidatos relevantes (filtrados) están representados por el candidato a candidatura computarizado
• las entradas están vinculadas con el modelo v a las definiciones de propidad de datos EXISTENTES

Fiddle https://jsfiddle.net/sLLk4u2a/

(La búsqueda es solo exacta y sensible a mayúsculas y minúsculas)