前提・実現したいこと
Vue.js 特定の条件での、データの絞り込み
やりたいこと
-
下記のようなデータがあります。
-
部署:departmentsでループを回し、同じdepartment_idを持つ従業員:employeesを表示したい
vue
1data () { 2 return { 3 // 従業員 4 employees: [ 5 { id: 1, name: '総務一郎', department_id: 1 }, 6 { id: 2, name: '総務二郎', department_id: 1 }, 7 { id: 3, name: '開発一郎', department_id: 2 }, 8 { id: 4, name: '開発二郎', department_id: 2 }, 9 { id: 5, name: '開発三郎', department_id: 2 }, 10 { id: 6, name: '人事一郎', department_id: 3 } 11 ], 12 // 部署 13 departments: [ 14 { id: 1, name: '総務部' }, 15 { id: 2, name: '開発部' }, 16 { id: 3, name: '人事部' } 17 ] 18 } 19}
該当のソースコード
vue
1<template> 2 <div class="filter"> 3 <!-- 総務部 --> 4 <div v-for="(employee, index) in employees" :key="index"> 5 <div v-if="employee.department_id === 1"> 6 {{ employee.name }}<br> 7 </div> 8 </div> 9 10 <!-- 開発部 --> 11 <div v-for="(employee, index) in employees" :key="index"> 12 <div v-if="employee.department_id === 2"> 13 {{ employee.name }}<br> 14 </div> 15 </div> 16 17 <!-- 人事部 --> 18 <div v-for="(employee, index) in employees" :key="index"> 19 <div v-if="employee.department_id === 3"> 20 {{ employee.name }}<br> 21 </div> 22 </div> 23 24 <!-- 総務部だけfilter --> 25 <div v-for="(employee, index) in employeesList1" :key="index"> 26 {{ employee.name }}<br> 27 </div> 28 </div> 29</template> 30 31<script> 32export default { 33 data () { 34 return { 35 // 従業員 36 employees: [ 37 { id: 1, name: '総務一郎', department_id: 1 }, 38 { id: 2, name: '総務二郎', department_id: 1 }, 39 { id: 3, name: '開発一郎', department_id: 2 }, 40 { id: 4, name: '開発二郎', department_id: 2 }, 41 { id: 5, name: '開発三郎', department_id: 2 }, 42 { id: 6, name: '人事一郎', department_id: 3 } 43 ], 44 // 部署 45 departments: [ 46 { id: 1, name: '総務部' }, 47 { id: 2, name: '開発部' }, 48 { id: 3, name: '人事部' } 49 ] 50 } 51 }, 52 computed: { 53 // 総務部だけ 54 employeesList1: function () { 55 return this.employees.filter(function (employee) { 56 return employee.department_id === 1 57 }) 58 } 59 } 60} 61</script>
試したこと
上記ソースコードにあるように
-
ベタ打ちでdepartment_idを指定すれば 表示上はやりたいことが実現できています…
-
が、departmentが増える度に同じようなコードを追加することになってしまうので、この書き方は避けたいです。
-
調べてみてcomputedで
filter
を使うと良いとあったのですが、employee.department_id === 1
の=== 1
の部分を動的な値にする方法が見つけられませんでした。
補足情報(FW/ツールのバージョンなど)
- Vue.js 2.6.11
- Vue CLI 4.1.2
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/27 05:14
2020/01/29 03:47