回答編集履歴

2

chousei

2019/11/11 07:32

投稿

yambejp
yambejp

スコア116690

test CHANGED
@@ -11,3 +11,81 @@
11
11
  今回の件、よくみたら配列じゃなくてstringの比較ですね
12
12
 
13
13
  文字列の場合user.nameの文字列がthis.keywordにヒットしたらヒットした位置がかえります
14
+
15
+
16
+
17
+ # 参考
18
+
19
+ 文字列の比較だとつい正規表現を選んじゃいましけどね
20
+
21
+
22
+
23
+ ```javascript
24
+
25
+ <div id="app">
26
+
27
+ <input type="text" v-model="keyword">
28
+
29
+ <table>
30
+
31
+ <tr v-for="user in filteredUsers">
32
+
33
+ <td v-text="user.id"></td>
34
+
35
+ <td v-text="user.name"></td>
36
+
37
+ <td v-text="user.email"></td>
38
+
39
+ </tr>
40
+
41
+ </table>
42
+
43
+ </div>
44
+
45
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
46
+
47
+ <script>
48
+
49
+ const app=new Vue({
50
+
51
+ el: '#app',
52
+
53
+ data: {
54
+
55
+ keyword: '',
56
+
57
+ users: [
58
+
59
+ {id: 1,name: '鈴木太郎',email: 'suzukitaro@example.com'},
60
+
61
+ {id: 2,name: '佐藤二郎',email: 'satoujiro@example.com'},
62
+
63
+ {id: 3,name: '田中三郎',email: 'tanakasaburo@example.com'},
64
+
65
+ {id: 4,name: '山本四郎',email: 'yamamotoshiro@example.com'},
66
+
67
+ {id: 5,name: '高橋五郎',email: 'takahashigoro@example.com'},
68
+
69
+ ]
70
+
71
+ },
72
+
73
+ computed: {
74
+
75
+ filteredUsers: x=>{
76
+
77
+ const reg=new RegExp(x.keyword);
78
+
79
+ return x.users.filter(user=>reg.test(user.name) || reg.test(user.email));
80
+
81
+ }
82
+
83
+ }
84
+
85
+ });
86
+
87
+ </script>
88
+
89
+
90
+
91
+ ```

1

調整

2019/11/11 07:32

投稿

yambejp
yambejp

スコア116690

test CHANGED
@@ -5,3 +5,9 @@
5
5
  1つもヒットしない場合は戻り値が-1になります。
6
6
 
7
7
  つまり!==-1を指定することで、「ヒットしたら」という意味になります
8
+
9
+
10
+
11
+ 今回の件、よくみたら配列じゃなくてstringの比較ですね
12
+
13
+ 文字列の場合user.nameの文字列がthis.keywordにヒットしたらヒットした位置がかえります