【Vue.js】filterでリストを表示したい

Vue.jsで、ラジオボタンで選択したカテゴリーに該当する人物のリストを表示したいです。

vue.js,html
1<html>
2<body>
3<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
4<div class="container" id="people">
5	<div class="filter">
6		<label><input type="radio" v-model="selectedCategory" value="0" /> すべて</label>
7		<label><input type="radio" v-model="selectedCategory" value="1" /> スポーツ</label>
8		<label><input type="radio" v-model="selectedCategory" value="2" /> 演劇</label>
9		<label><input type="radio" v-model="selectedCategory" value="3" /> 音楽</label>
10	</div>
11	
12	<ul class="people-list">
13		<li v-for="person in filteredPeople">{{ person.name }}</li>
14	</ul>
15</div>
16
17<script>
18var vm = new Vue({
19	el:  "#people",
20	data: {
21		people: [
22			{ name: "イチロー", category: [1,2] },
23			{ name: "ジロー", category: "1" },
24			{ name: "サブロー", category: "1" },
25			{ name: "シロー", category: "2" },
26			{ name: "ゴロー", category: "2" },
27			{ name: "ロクロー", category: "3" },
28		],
29		selectedCategory: "0"
30	},
31	computed: {
32		filteredPeople: function() {
33			var vm = this;
34			var category = vm.selectedCategory;
35			
36			if(category === "0") {
37				return vm.people;
38			} else {
39				return vm.people.filter(function(person) {
40					return person.category === category;
41				});
42			}
43		}
44	}
45});
46</script>
47
48</body>
49</html>

＜わからないこと＞
人物の配列people: []で、categoryを複数設定{ name: "イチロー", category: [1,2] },したとき、
〇スポーツ　〇演劇　
どちらの押下時にも「イチロー」を表示させたいのですが、できずに困っています。

＜やってみたこと＞
mapやreduceで二次元配列を一次元配列に戻すことはできるのですが、categoryの数字のみの配列になってしまい、nameの情報も含んだ配列の戻し方がわからず、質問させていただきました。

＜補足＞　
人物の配列people: []内の書き方が間違っていたら、そちらもご教授いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

「===」は一致しているかを調べます。
「category」は「数値」なのだと思いますが、「person.category」は「配列」と「数値」が混じっています。
「配列 === 数値」は「false」なので、「イチロー」が出ていないのかと思います。

「filter」の処理で「配列」なのかそうじゃないのかで処理を分け、
「配列」であれば、その配列内に「category」が存在する場合にその「preson」を返し、
「配列」でなければ、今までの処理を行うとうまくいくのではないでしょうか。

javascript
1return vm.people.filter(function(person) {
2    if (Array.isArray(person.category)) {
3        return person.category.includes(parseInt(category));
4    } else {
5        return person.category === category;
6    }
7}

投稿2022/09/07 06:57

編集2022/09/07 08:32

Matsumon0104

総合スコア1005

ashita_harenohi

2022/09/07 08:01 編集

早速のご丁寧な回答ありがとうございます！とても早くて驚きました。 return ['name': '', 'category': category];　　このような書き方ができるとは知りませんでした。さて、頂いたコードでSyntaxErrorが出たので、下記のように変更して実装したところ、イチローがcategory 1と2に表示されたのですが、3にも表示されてしまいます。（categoryを配列にしたものが、すべてのリストに表示されてしまいます。） ======== return vm.people.filter(function(person) { if (Array.isArray(person.category)) { if (person.category.includes(category)) { return person; } return {name: '', category: category}; } return person.category === category; }); ======== if (person.category.includes(category)) { ここのifの判定ができていないようです。

Matsumon0104

2022/09/07 08:17 編集

すいません。回答に掲示しましたコードは正しくありません。 filter内処理を下記のように書き直すとどうなりますか？（回答のソースコードも直してあります。) if (Array.isArray(person.category)) { return person.category.include(category); } else { return person.category === category; }

ashita_harenohi

2022/09/07 08:26 編集

ご回答ありがとうございます！書き直したところ、「category」が配列の「person」がどのリストにも表示されなくなってしまいました。

Matsumon0104

2022/09/07 08:35 編集

度々すいません。「include」ではなく「includes」のタイポです。また、引数として入力されるcategoryが文字列で、配列の要素が数値なので、引数として入力されるcategoryをparseIntで数値化する必要があります。回答ソース修正しています。

ashita_harenohi

2022/09/07 08:57

毎回早いご回答ありがとうございます！ parseInt、気付きませんでした。勉強になりました。おかげさまで、想定の動きとなりました。 2週間ほどずっと試行錯誤していましたが、こんなに早く解決して、驚いています！本当にありがとうございました。

Matsumon0104

2022/09/07 08:59

上手くできてよかったです。何度も、修正してすいません。