質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

2回答

356閲覧

【Vue.js】特定の条件での、データの絞り込み

kyoruni

総合スコア93

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2020/01/27 02:30

編集2020/01/27 02:42

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

色々やり方はあると思いますがmethodsを使ってみてもよいと思います。

vue

1 2 3<template> 4 <div class="filter"> 5 <div v-for="department in departments" :key="department.id"> 6 {{ department.name }} 7 <div v-for="employes in getEmployeesList(department.id)" :key="employes.id"> 8 {{ employes.name }} 9 </div> 10 </div> 11 </div> 12</template> 13 14<script> 15export default { 16 data () { 17 return { 18 // 従業員 19 employees: [ 20 { id: 1, name: '総務一郎', department_id: 1 }, 21 { id: 2, name: '総務二郎', department_id: 1 }, 22 { id: 3, name: '開発一郎', department_id: 2 }, 23 { id: 4, name: '開発二郎', department_id: 2 }, 24 { id: 5, name: '開発三郎', department_id: 2 }, 25 { id: 6, name: '人事一郎', department_id: 3 } 26 ], 27 // 部署 28 departments: [ 29 { id: 1, name: '総務部' }, 30 { id: 2, name: '開発部' }, 31 { id: 3, name: '人事部' } 32 ] 33 } 34 }, 35 methods: { 36 getEmployeesList(id) { 37 return this.employees.filter(function (employee) { 38 return employee.department_id === id 39 }) 40 } 41 } 42} 43</script> 44

投稿2020/01/27 05:02

編集2020/01/27 05:03
nt4c

総合スコア768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nt4c

2020/01/27 05:14

「employee.department_id === 1の=== 1の部分を動的な値にする方法が見つけられませんでした。」とのことですがこのような場合は公式でも上記のようにmethodsを使う方法が提示されています。 https://jp.vuejs.org/v2/guide/list.html
kyoruni

2020/01/29 03:47

「入れ子になった v-for のループの中」の例が、やりたかったことそのままでした ありがとうございました! 質問する前にドキュメントを読み込んだつもりでいましたが、全然読めていませんでした… 次からは、まず公式ドキュメントをしっかり探すようにします。
guest

0

こんな感じで

投稿2020/01/27 03:41

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/01/27 03:43

あらかじめemploeeからユニークにdepartment_idを抜き出しておいて forでマッチさせたらどうでしょう? ただしおなじdivないで総務部だけfilterを記述するとfor内で なんども総務だけ表示されるので、処理をわける必要があります
yambejp

2020/01/27 03:47

もしくはdepartmentsで回したほうが効率的かも・・・ (該当ユーザーがいなくても回っちゃいますが)
kyoruni

2020/01/29 03:55

普通にdepartmentsとemployeesのv-forを入れ子にすれば良かったですね…(どうして思いつかなかったのか自分でも分かりません…) 例も提示していただいてありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問