リアルタイム検索 inputタグとヒットする文字がある場合だけ表示したい

以下のコードのようにすると

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" :key="user.id">
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.6.12/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        },
38        computed: {
39            filteredUsers: function() {
40
41                var users = [];
42
43                for(var i in this.users) {
44
45                    var user = this.users[i];
46
47                    if(user.name.indexOf(this.keyword) !== -1 ||
48                        user.email.indexOf(this.keyword) !== -1) {
49
50                        users.push(user);
51                    }
52                }
53
54                return users;
55
56            }
57        }
58    });
59
60</script>
61</body>
62</html>

このようになります。

#したいこと
私はinputタグに入力された文字がヒットする場合のみ表示するようにしたいです。
inputタグが空の場合は何も表示したくないです。

どのようにしたらいでしょうか？？

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

回答2件

二例目です。

html
1<html>
2  <body>
3    <div id="app">
4      <input type="text" v-model="keyword" />
5      <table>
6        <tr v-for="user in filteredUsers" :key="user.id">
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.6.12/dist/vue.min.js"></script>
14    <script>
15      new Vue({
16        el: "#app",
17        data: {
18          keyword: "",
19          users: [
20            {
21              id: 1,
22              name: "鈴木太郎",
23              email: "suzukitaro@example.com"
24            },
25            {
26              id: 2,
27              name: "佐藤二郎",
28              email: "satoujiro@example.com"
29            },
30            {
31              id: 3,
32              name: "田中三郎",
33              email: "tanakasaburo@example.com"
34            }
35          ],
36          filteredUsers: []
37        },
38        created: function() {
39          this.filteredUsers = JSON.parse(JSON.stringify(this.users));
40        },
41        watch: {
42          keyword: function(newValue, oldValue) {
43            this.filteredUsers = this.users.filter(
44              user =>
45                user.name.includes(newValue) || user.email.includes(newValue)
46            );
47          }
48        }
49      });
50    </script>
51  </body>
52</html>

投稿2021/07/15 23:52

編集2021/07/15 23:56

shiketa

総合スコア4061

一例です。

css
1    tr {
2      display: none;
3    }

Javascript
1  <script>
2
3    new Vue({
4      el: '#app',
5      data: {
6        keyword: '',
7        users: [
8          {
9            id: 1,
10            name: '鈴木太郎',
11            email: 'suzukitaro@example.com'
12          },
13          {
14            id: 2,
15            name: '佐藤二郎',
16            email: 'satoujiro@example.com'
17          },
18          {
19            id: 3,
20            name: '田中三郎',
21            email: 'tanakasaburo@example.com'
22          },
23        ]
24      },
25      computed: {
26        filteredUsers: function () {
27          var users = [];
28          for (var i in this.users) {
29            var user = this.users[i];
30            users.push(user);
31          }
32          return users;
33        }
34      }
35    });
36
37    const nameArr = ["鈴木太郎", "佐藤二朗", "田中三郎"];
38    const emailArr = ["suzukitaro@example.com", "satoujiro@example.com", "tanakasaburo@example.com"];
39    const td = document.getElementsByTagName("td");
40    const tr = document.getElementsByTagName("tr");
41    const input = document.getElementsByTagName("input")[0];
42
43    input.addEventListener("input", () => {
44      const inputVal = input.value;
45      if(inputVal !== "") {
46          matchArr1(inputVal);
47        } else {
48      for(let i = 0; i<tr.length; i++) {
49            tr[i].style.display = "none";
50        }
51      }
52    });
53
54    const matchArr1 = (val) => {
55      for(let i = 1; i < td.length; i++) {
56        if(i % 3 !== 0) {
57          matchArr2(val);
58        }
59      }
60    }
61
62    const matchArr2 = (val) => {
63      for(let i = 0; i < nameArr.length; i++) {
64        if (nameArr[i].indexOf(val) > -1 || emailArr[i].indexOf(val) > -1) {
65          tr[i].style.display = "block";
66        } else {
67          tr[i].style.display = "none";
68        }
69      }
70    }
71
72  </script>