VueJS複選框過濾

Question

這是我的第一個VueJS項目（從jQuery轉向），我試圖用多個複選框過濾網格。正如你可以從JavaScript看到的，我有一個filterJobs函數，它用從檢查的內容中​​設置的值（v-model =「checkedLocations」）對數組進行過濾。 array.includes似乎過濾一個值，我想過濾多個值。我不想流行或切片的陣列，因爲如果他們取消一個位置，他們會離開，並不會重新綁定

let careers = careers || {}; 
 

 
careers.taleo = (function($){ 
 

 
    let app; 
 

 
    let init = function() { 
 

 
    app = new Vue({ 
 
     el: '#app', 
 
     data: { 
 
     locations: ['Scottsdale, AZ','Chandler, AZ','Irvine, CA','Denver, CO','Chicago, IL','Rockville, MD','Kansas City, MO','Charlotte, NC','Red Bank, NJ','Henderson, NV','Melville, NY','Allentown, PA','Irving, TX'], 
 
     jobs: null, 
 
     checkedLocations: [] 
 
     }, 
 
     created: function() { 
 
     this.fetchData(); 
 
     }, 
 
     methods: { 
 
      fetchData: function() { 
 
      this.jobs = [ 
 
       { id: '1', title: 'Circuit Court Clerk', description: 'lorem ipsum', location: 'Charlotte, NC', department: 'Sales and Marketing', date: '23/10/17' }, 
 
       { id: '2', title: 'Tie Buyer', description: 'lorem ipsum', location: 'Irvine, CA', department: 'Media Relations', date: '21/10/16' }, 
 
       { id: '3', title: 'Leaded Glass Installer', description: 'lorem ipsum', location: 'Kansas City, MO', department: 'Public Relations', date: '16/09/17' }, 
 
       { id: '4', title: 'Wheat Inspector', description: 'lorem ipsum', location: 'Red Bank, NJ', department: 'Quality Assurance', date: '12/06/16' }, 
 
       { id: '5', title: 'Executive Officer, Special Warfare Team', description: 'lorem ipsum', location: 'Irving, TX', department: 'Public Relations', date: '19/03/18' }, 
 
       { id: '6', title: 'Wildlife Control Agent', description: 'lorem ipsum', location: 'Irvine, CA', department: 'Sales and Marketing', date: '07/01/17' }, 
 
       { id: '7', title: 'Arresting Gear Operator', description: 'lorem ipsum', location: 'Charlotte, NC', department: 'Asset Management', date: '04/09/17' }, 
 
       { id: '8', title: 'Arresting Gear Operator', description: 'lorem ipsum', location: 'Chandler, AZ', department: 'Tech Support', date: '01/04/17' }, 
 
       { id: '9', title: 'Biogeographer', description: 'lorem ipsum', location: 'Chicago, IL', department: 'Quality Assurance', date: '01/05/17' }, 
 
       { id: '10', title: 'LAN Systems Administrator', description: 'lorem ipsum', location: 'Scottsdale, AZ', department: 'Customer Relations', date: '29/04/18' }, 
 
       { id: '11', title: 'Copper Plater', description: 'lorem ipsum', location: 'Irving, TX', department: 'Tech Support', date: '17/08/17' }, 
 
       { id: '12', title: 'Leaded Glass Installer', description: 'lorem ipsum', location: 'Rockville, MD', department: 'Sales and Marketing', date: '02/11/16' }, 
 
       { id: '13', title: 'Line Cook', description: 'lorem ipsum', location: 'Chandler, AZ', department: 'Advertising', date: '02/12/17' }, 
 
       { id: '14', title: 'Special Education Teaching Assistant', description: 'lorem ipsum', location: 'Red Bank, NJ', department: 'Payroll', date: '02/05/17' }, 
 
       { id: '15', title: 'Clarinetist', description: 'lorem ipsum', location: 'Melville, NY', department: 'Payroll', date: '30/05/17' }, 
 
       { id: '16', title: 'Arresting Gear Operator', description: 'lorem ipsum', location: 'Henderson, NV', department: 'Payroll', date: '23/02/18' }, 
 
       { id: '17', title: 'Wheat Inspector', description: 'lorem ipsum', location: 'Red Bank, NJ', department: 'Tech Support', date: '12/08/16' }, 
 
       { id: '18', title: 'Wildlife Control Agent', description: 'lorem ipsum', location: 'Melville, NY', department: 'Payroll', date: '03/05/17' }, 
 
       { id: '19', title: 'Print Retoucher', description: 'lorem ipsum', location: 'Chicago, IL', department: 'Sales and Marketing', date: '19/06/16' }, 
 
       { id: '20', title: 'Mathematical Statistician', description: 'lorem ipsum', location: 'Scottsdale, AZ', department: 'Tech Support', date: '10/07/16' } 
 
      ]; 
 
      }, 
 
      filterJobs: function(event) { 
 
      app.jobs = app.jobs.filter(function (job) { 
 
       return job.location.includes(app.checkedLocations); 
 
      }); 
 

 
      // filterJobs: function(event) { 
 
      //  app.jobs = app.jobs.filter(function(location) { 
 
      //  return !app.checkedLocations.includes(location); 
 
      //  }); 
 
      } 
 
     } 
 
    }); 
 

 

 

 
    }; 
 

 

 
    return { init, app }; 
 

 
})(); 
 

 
(function(){ 
 
    careers.taleo.init(); 
 
})();

#app { 
 
    padding: 25px; 
 
} 
 
#app ul { 
 
    margin-left: 0; 
 
    padding: 0; 
 
} 
 
#app ul li { 
 
    list-style: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> 
 

 
<div id="app"> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-3"> 
 
     <h3>Locations</h3> 
 
     <ul> 
 
      <li v-for="location in locations"> 
 
      <input type="checkbox" v-model="checkedLocations" v-on:click="filterJobs" v-bind:value="location" /> {{location}} 
 
      </li> 
 
     </ul> 
 
     <span>Checked locations: {{ checkedLocations }}</span> 
 
     </div> 
 
     <div class="col-md-9"> 
 
     <div class="jobs"> 
 
      <div class="job" v-for="job in jobs"> 
 
      <div class="card" style="margin: 5px 0"> 
 
       <div class="card-block"> 
 
       <h4 class="card-title"> 
 
        {{ job.title }} 
 
       </h4> 
 
       <small class="pull-right text-muted" style="font-size: 12x"> 
 
        {{job.date}} 
 
       </small> 
 
       <p class="card-text"> 
 
        <!-- {{job.description}} --> 
 
       </p> 
 
       <button class="btn btn-sm btn-primary">View</button> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div>

https://codepen.io/neil/pen/WjXrxx

Answer 1

使用一個計算值爲您的過濾位置。

computed:{ 
    filteredJobs(){ 
    // if there are no checked locations, return everything. 
    // You could remove this if you only want to return 
    // checked locations. 
    if (!this.checkedLocations.length) 
     return this.jobs 

    return this.jobs.filter(j => this.checkedLocations.includes(j.location)) 
    } 
} 

並修改您的模板。

<div class="job" v-for="job in filteredJobs"> 

同時還刪除您的filterJobs方法。

Example。

基本上你需要你的過濾器翻轉到

this.checkedLocations.includes(job.location). 

而且，你不希望改變每次篩選，因爲你流血數據的時間數據。然而，使用計算的值對於Vue更具慣用。

Answer 2

使用v-如果行，你列出工作：

<div class="job" v-if=filterJobs(job) v-for="job in jobs"> 

和使用方法filterJobs這樣的：

filterJobs: function(data) { 
     if (this.checkedLocations.length == 0) return true; 
     return this.checkedLocations.includes(data.location); 
} 

Edited code