如何在vuejs中做濾鏡和分頁

Question

我想在我的視圖中做濾鏡和分頁 - 候選人頁面..我想顯示候選人根據名稱和經驗和預期ctc ..我想顯示候選人.. 誰能幫我該怎麼做，在vuejs ...

這是我的看法，candidates.blade.php

<div class="container"> 
<div class="row"> 
    <el-row :gutter="12"> 
     <el-col> 
     <p>View Candidates</p> 
    </el-col> 
     </el-row> 

    <el-row :gutter="12"> 
     <template v-for="c in candidates"> 
      <el-col :span="6"> 
      <Candidate :c="c" :key="c.id"></Candidate> 
      </el-col> 
     </template> 
    </el-row> 
</div> 

這裏是我的看法，candidates.js頁：

import Candidate from './components/Candidate.vue'; 
const app = new Vue({ 
el: '#app', 
data() { 
    return { 
     candidates: window.data.candidates, 
     sortKey : 'first_name' 
    } 
}, 
components: { Candidate }, 

}）;

這裏是我的candidate.vue頁：

<template> 
<ElCard> 
    <div slot="header"> 
     <strong> 
     {{c.first_name.toUpperCase() + ' ' + c.last_name.toUpperCase()}} 
     <br /> 
     <small>{{c.role}} - {{c.experience}} Years</small> 
     </strong> 
    </div> 

    <p><strong>{{c.contact_no}} : {{c.email}}</strong></p> 
    <p> 
     <strong>Currently at:</strong> {{c.current_location}} 
     <br /> 
     <strong>Ready to move:</strong> {{c.desired_location}} 
    </p> 

    <ElButton type="primary" size="small" @click="ResumeDialog = true">VIEW RESUME</ElButton> 

    <ElDialog class="text-left" :title="c.first_name.toUpperCase() + ' ' + c.last_name.toUpperCase()" v-model="ResumeDialog"> 
     <p><strong>{{c.role}} - {{c.experience}} Years</strong></p> 
     <p> 
      <strong>Currently at:</strong> {{c.current_location}} 
      <br /> 
      <strong>Ready to move:</strong> {{c.desired_location}} 
     </p> 
     <p>{{c.resume}}</p> 
     <br /> 

     <p><strong>{{c.contact_no}} : {{c.email}}</strong></p> 
    </ElDialog> 
</ElCard> 

//腳本

import { Button as ElButton, Dialog as ElDialog, Card as ElCard } from 'element-ui'; 
    import axios from 'axios'; 

    export default { 
     props: ['c'], 
     data() { 
      return { 
       ResumeDialog: false, 
      } 
     }, 
     components: { ElButton, ElDialog, ElCard }, 
    } 

誰能幫我該怎麼做..

TIA。 。

Answer 1

在你看來，candidates.js它應該是這樣的：

import Candidate from './components/Candidate.vue'; 
const app = new Vue({ 
    el: '#app', 
    data() { 
    return { 
     sortKey : 'first_name', 
     page: 0, 
     itemsPerPage: 4, 
    } 
    }, 
    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.itemsPerPage * this.page + this.itemsPerPage)   
    }, 
    }, 
    computed: { 
    //compute number of pages, we always round up (ceil) 
    numPages() { 
     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) => { 
     //e.g. 
     if(candidate.experience < 10) { 
      return false; 
     } 
     return true; 
     }) 
     return filtered; 
    }, 
    paginedCandidates() { 
     return this.paginate() 
    } 
    } 
}); 

而且您呈現的按鈕模板：

<div class="container"> 
<div class="row"> 
    <el-row :gutter="12"> 
     <el-col> 
      <p>View Candidates</p> 
     </el-col> 
    </el-row> 

    <el-row :gutter="12"> 
     <template v-for="c in paginedCandidates"> 
      <el-col :span="6"> 
       <Candidate :c="c" :key="c.id"></Candidate> 
      </el-col> 
     </template> 
    </el-row> 
    <el-row> 
     <!-- setPage is our method defined in methods object --> 
     <button v-for="n in numPages" @click="setPage(n)">@{{ n }}</button> 
    </el-row> 
</div> 

我相信這應該做的魔力。可能你必須根據你的需要調整它。