vue.js laravel-5.4

cómo hacer filtros en vue.js



laravel-5.4 (1)

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..


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)