JavaScript(vue.js)で顧客管理のシステムを作っています。
都道府県とそれぞれの都道府県に属している税務署を文字列検索して、一致した税務署をフィルタする機能を実装しています。
（４７都道府県に対して、税務署は、ダミーデータとして４７税務署存在しています。）
フォームに文字列を入力し、検索ボタンを押下して、税務署のフィルタはできるようになったのですが、都道府県をフィルタする方法が思いつきません。
<div v-for="todoufuken in todoufukens" :key="todoufuken.id">
の「todoufukens」部分をフィルタ処理できるようにしたいです。
該当のソースコード
vue
1<template>
2 <div>
3 <nav>
4 <div>
5 <ul>
6 <li>
7 <router-link>▷ 戻る</router-link>
8 </li>
9 </ul>
10 </div>
11 </nav>
12
13 <div>
14 <div>
15 <div>
16 <input type="text" name="kokyaku_mei" id="kokyaku_mei" />
17 <button
18 name="button"
19 type="submit"
20 @click="submitKeyword"
21 >検索</button>
22 </div>
23 </div>
24
25 <div>
26 <div>提出先</div>
27 <div>宛名</div>
28 <div>住所</div>
29 </div>
30
31 <div v-for="todoufuken in todoufukens" :key="todoufuken.id">
32 <div>
33 <div>{{ _.get(todoufuken, "todoufuken_name") }}</div>
34 </div>
35 <div v-for="zeimusyo in filteredZeimusyos(todoufuken.id)" :key="zeimusyo.id">
36 <div>
37 <div>
38 <a href>▷ {{ _.get(zeimusyo, "name") }}</a>
39 </div>
40 <div>{{ _.get(zeimusyo, "name") }}</div>
41 <div>
42 〒{{ _.get(zeimusyo, "yuubinbangou") }}
43 <br />
44 {{ _.get(zeimusyo, "jyuusyo1") }}
45 </div>
46 </div>
47 </div>
48 </div>
49 </div>
50 </div>
51</template>
52
53<script>
54import { TODOUFUKENS_PATH, ZEIMUSYOS_PATH } from "@/constants/endpoints";
55
56export default {
57 data() {
58 return {
59 keyword: "",
60 todoufukens: [],
61 zeimusyos: [],
62 };
63 },
64 computed: {
65 filteredTodoufukens() {
66 return this.keyword
67 ? this.todoufukens.filter((todoufuken) => todoufuken.id === 1) || {}
68 : this.todoufukens;
69 },
70 },
71 methods: {
72 filtered(todoufukenId) {
73 return (
74 this.zeimusyos.filter(
75 (zeimusyo) => zeimusyo.todoufuken_id === todoufukenId
76 ) || {}
77 );
78 },
79 filteredZeimusyos(todoufukenId) {
80 return this.keyword
81 ? this.filtered(todoufukenId).filter((zeimusyo) =>
82 zeimusyo.name.match(this.keyword)
83 ) || {}
84 : this.filtered(todoufukenId) || {};
85 },
86 submitKeyword() {
87 this.keyword = document.getElementById("kokyaku_mei").value;
88 },
89 },
90 async mounted() {
91 const response1 = await this.$http.get(`${TODOUFUKENS_PATH}`);
92 this.todoufukens = response1.data;
93
94 const response2 = await this.$http.get(`${ZEIMUSYOS_PATH}`);
95 this.zeimusyos = response2.data;
96 },
97};
98</script>
APIの抜粋 id:47 沖縄県まであります。
todoufukens
1[{
2 "id": 1,
3 "todoufuken_name": "北海道",
4},]
zeimusyos
1[{
2 "id": 1,
3 "name": "北海道税務署",
4 "yuubinbangou": "111-2222",
5 "todoufuken_id": 1,
6 "jyuusyo1": "北海道税務署住所1",
7},]
試したこと
computed
1filteredTodoufukens() {
2 return this.keyword
3 ? this.todoufukens.filter((todoufuken) => todoufuken.id === 1) || {}
4 : this.todoufukens;
5 },
上記のように書くと、北海道と検索した場合のみ成功することまでは分かりました。
ただ、このようなアプローチであっているのか正直わかっておりません。
お手数おかけいたしますがよろしくい願い致します。
Q&A
自己解決
