大佬教程收集整理的这篇文章主要介绍了如何添加 Vue.js 搜索过滤器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我尝试学习 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: {},});
根据文档的this part：
“计算属性根据它们的反应性依赖项进行缓存。计算属性仅在其某些反应性依赖项发生变化时才会重新评估。”
这意味着，在您的情况下，filteredList 只会在 this.savedMembers 数组发生变化时发生变化。
所以，正确的方法是：
filteredSavedMembers
@H_262_9@您创建一个方法来在 search 发生变化时做出反应（即 <input @change="onSearchChange".../>
@H_262_9@在此方法中，您将过滤分配给 filteredSavedMembers
@H_262_9@就是这样，现在您只需在模板中显示过滤后的列表。
*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)
)
以上是大佬教程为你收集整理的如何添加 Vue.js 搜索过滤器全部内容，希望文章能够帮你解决如何添加 Vue.js 搜索过滤器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。