如何添加 Vue.js 搜索过滤器答案

【问题标题】：How can I add Vue.js search filter如何添加 Vue.js 搜索过滤器
【发布时间】：2021-03-14 14:26:32
【问题描述】：

我尝试学习 Vue.js，现在尝试解决我的数组 savedMembers 的过滤器搜索。但我不能让它工作。

数组名称：savedMembers
数组、名字、姓氏和电子邮件中的变量
搜索字段：搜索

如何添加响应式搜索？
如何更新已保存成员的视图？
我想要一个过滤函数来过滤数组的所有值。但是，如果我只能按名字过滤，那也没关系。

这是我的 index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Team Page</title>
</head>
<body>
  <div id="app">
    <team-page></team-page>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

这是我的 main.js

  template: `
  <div class="team_members">
    <h3>Team</h3>
    <div class="create_member">
      <form action="" @submit.prevent="onSubmit">
        <label for="firstName">First name</label><br>
        <input type="text" v-model="firstName" name="firstName"><br>
        <label for="lasttName">Last name</label><br>
        <input type="text" v-model="lastName" name="lastName"><br>
        <label for="email">Email</label><br>
        <input type="text" v-model="email" name="email"><br>
        <input class="addMemberBtn" type="submit" value="Submit">
      </form>
      <p v-if="errors.length">
        <b>Please correct the following error(s):</b>
        <ul>
          <li v-for="error in errors">{{ error }}</li>
        </ul>
      </p>
    </div>
    <div class="teamContainer">
      <h3 class="team_header">Team</h3>
      <div class="team_content">
        <div class="container">
          <div class="searchbox">
            <input class="search" type="text" placeholder="Search" v-model="search">
          </div>
          <div class="createMemberBtn">
            <button>Add New Team Member</button>
          </div>
        </div>
        <div class="view-members">
          <table>
            <tr>
              <th>Name</th>
              <th colspan="2">Status</th>
            </tr>
            <tr v-for="member in savedMembers">
              <td>{{ member.firstName }} {{ member.lastName }}</td>
              <td>{{ member.email }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
  `,
  data() {
    return {
      search: null,
      firstName: null,
      lastName: null,
      email: null,
      errors: [],
      savedMembers: [],
    };
  },
  methods: {
    addNewTeamMember(newTeamMember) {
      this.savedMembers.push(newTeamMember);
    },
    onSubmit() {
      if (this.firstName && this.lastName && this.email) {
        let newTeamMember = {
          firstName: this.firstName,
          lastName: this.lastName,
          email: this.email,
        };
        this.addNewTeamMember(newTeamMember);
        //this.$emit('members-submitted', newTeamMember)
        this.firstName = null;
        this.lastName = null;
        this.email = null;
      } else {
        if (!this.firstName) this.errors.push("First name required");
        if (!this.lastName) this.errors.push("Last name required");
        if (!this.email) this.errors.push("Email required");
      }
    },
  },
  computed: {
    /*filteredList() {
      return this.savedMembers.filter((member) => {
        return member.firstName
          .toLowerCase()
          .includes(this.search.toLowerCase());
      });
    },*/
  },
});

var app = new Vue({
  el: "#app",
  data: {},
});

【问题讨论】：

标签： vue.js

【解决方案1】：

根据this part的文档：

“计算属性根据其反应性依赖项进行缓存。计算属性仅在其某些反应性依赖项发生变化时才会重新评估。”

这意味着，在您的情况下，filteredList 只有在 this.savedMembers 数组更改时才会更改。

所以，正确的方法是：

创建另一个数组，假设filteredSavedMembers
您创建一个方法来在search 更改时做出反应（即<input @change="onSearchChange".../>
在此方法中，您将过滤分配给filteredSavedMembers
就是这样，现在您只需在模板中显示过滤后的列表即可。

*Obs: 要按多个值进行过滤，可以使用or (||) 运算符，如下所示：

const search = this.search.toLowerCase()
this.filteredSavedMembers = this.savedMembers
  .filter(({ firstName, lastName, email }) =>
    firstName.toLowerCase().includes(search) ||
    lastName.toLowerCase().includes(search) ||
    email.toLowerCase().includes(search)
  )

【讨论】：

这是一个非常有用的答案。谢谢
很高兴为您提供帮助，如果还有什么让您感到困惑，请在此处留言。
当我将 @change="onSearchChange" 添加到我的搜索字段时，我希望能够通过 v-model="search" 将字段连接到搜索变量
你收到有关新消息的通知@Felipe Malara 还是我需要标记你的名字？
只有在被标记时，抱歉延迟了它，但是是的，你可以在同一个输入中同时做这两个，有v-model和@change。 @hereinsweden