このサイトで書かれている

vue.js
1<html>
2<body>
3<div id="app">
4    <input type="text" v-model="keyword">
5    <table>
6        <tr v-for="user in filteredUsers">
7            <td v-text="user.id"></td>
8            <td v-text="user.name"></td>
9            <td v-text="user.email"></td>
10        </tr>
11    </table>
12</div>
13<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
14<script>
15
16    new Vue({
17        el: '#app',
18        data: {
19            keyword: '',
20            users: [
21                {
22                    id: 1,
23                    name: '鈴木太郎',
24                    email: 'suzukitaro@example.com'
25                },
26                {
27                    id: 2,
28                    name: '佐藤二郎',
29                    email: 'satoujiro@example.com'
30                },
31                {
32                    id: 3,
33                    name: '田中三郎',
34                    email: 'tanakasaburo@example.com'
35                },
36                {
37                    id: 4,
38                    name: '山本四郎',
39                    email: 'yamamotoshiro@example.com'
40                },
41                {
42                    id: 5,
43                    name: '高橋五郎',
44                    email: 'takahashigoro@example.com'
45                },
46            ]
47        },
48        computed: {
49            filteredUsers: function() {
50
51                var users = [];
52
53                for(var i in this.users) {
54
55                    var user = this.users[i];
56
57                    if(user.name.indexOf(this.keyword) !== -1 ||
58                        user.email.indexOf(this.keyword) !== -1) {
59
60                        users.push(user);
61
62                    }
63
64                }
65
66                return users;
67
68            }
69        }
70    });
71
72</script>
73</body>
74</html>

にある、user.name.indexOf(this.keyword) !== -1は何を表してるのでしょうか？
-1している理由もよくわかっておりません。

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

回答1件

ベストアンサー

indexOfはuser.nameの配列の中でthis.keywordがヒットした場合、最初のキーを返します。
配列におけるキーはわかるとは思いますが0から始まります
1つもヒットしない場合は戻り値が-1になります。
つまり!==-1を指定することで、「ヒットしたら」という意味になります

今回の件、よくみたら配列じゃなくてstringの比較ですね
文字列の場合user.nameの文字列がthis.keywordにヒットしたらヒットした位置がかえります

参考

文字列の比較だとつい正規表現を選んじゃいましけどね

javascript
1<div id="app">
2    <input type="text" v-model="keyword">
3    <table>
4        <tr v-for="user in filteredUsers">
5            <td v-text="user.id"></td>
6            <td v-text="user.name"></td>
7            <td v-text="user.email"></td>
8        </tr>
9    </table>
10</div>
11<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
12<script>
13const app=new Vue({
14  el: '#app',
15  data: {
16  keyword: '',
17  users: [
18    {id: 1,name: '鈴木太郎',email: 'suzukitaro@example.com'},
19    {id: 2,name: '佐藤二郎',email: 'satoujiro@example.com'},
20    {id: 3,name: '田中三郎',email: 'tanakasaburo@example.com'},
21    {id: 4,name: '山本四郎',email: 'yamamotoshiro@example.com'},
22    {id: 5,name: '高橋五郎',email: 'takahashigoro@example.com'},
23    ]
24  },
25  computed: {
26    filteredUsers: x=>{
27      const reg=new RegExp(x.keyword);
28      return x.users.filter(user=>reg.test(user.name) || reg.test(user.email));
29    }
30  }
31});
32</script>
33