Vuejs / javascript / 我正在尝试连接一个搜索栏，该搜索栏搜索我的表格并根据我的输入显示结果

Question

我正在尝试遍历搜索栏中的每个按钮，同时仅显示与输入匹配的行filteredUsers.
我正在从 AWS S3 存储桶中获取用户列表，然后将该数据放入表中。

<div>
<div id="main">
Search: <input type="text" @input="filteredUsers" v-model="search" />
<base-table id="empTable" :data="info" :columns="columns">
<template slot="columns">
<th>Full Name</th>
<th>Work Email</th>
<th>Title</th>
<th> Status </th>
<th class="text-right">Actions</th>
</template>
<template
slot-scope="{row}"
v-if="filteredUsers &&
typeof info != 'undefined' &&
info != null &&
info.length != null &&
info.length > 0
" id="table">
<td>
<button  class="buttonChange " @click="(t) =>viewInfo(t)">
{{row.formattedName }}
</button>
</td>
<td>
<button  class="buttonChange" @click="(t) =>viewInfo(t)">
{{row.workEmail}}
</button>
</td>
<td>
<button  class="buttonChange" @click="(t) =>viewInfo(t)">
{{row.title}}
</button>
</td>
<td>
<button  class="buttonChange" @click="(t) =>viewInfo(t)">
{{row.activeORinactive}}
</button>
</td>

我的爪哒语

data() {
return {
columns: [],
info: [],
infoModal: "",
modal: false,
modalView: false,
refreshOnExit: 0,
error: "",
name: '',
search: " ",
}
},
methods: {
filteredUsers() {
return this.info.filter((user) => {
return info.formattedName.match(this.search);
})

},
async getList() {
try {
const list = await axios.get(`MyRequest`);
this.info = list.data;
this.info.sort(function(a, b) {
var nameA = a.formattedName.toUpperCase();
var nameB = b.formattedName.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
} catch (e) {
console.log(`getList`, e);
if (e.response.status === 400) {
this.error = e.response.data.message;
}
}
}
}

我在渲染上使用getList函数

created() {
this.getList();
}

我想就如何处理这个问题寻求一些帮助。

Answer 1

1st，你必须删除文本框上的@input，Vue 可观测性会自动触发更新。

2nd，filteredUsers(( 应该是一个computed属性，而不是一个方法。

网页更改

Search: <input type="text" v-model="search" />
<base-table id="empTable" :data="filteredUsers" :columns="columns">
...
<template
slot-scope="{row}"
id="table">

爪哇语

data() {
return {
columns: [],
info: [],
infoModal: "",
modal: false,
modalView: false,
refreshOnExit: 0,
error: "",
name: '',
search: " ",
};
},
computed: {
filteredUsers() {
if (!(this.info && this.info.length)) return []; //return empty if no info[]
return this.info.filter((user) => {
return user.match(this.search);
});
},
},
methods: {
async getList() {
try {
const list = await axios.get(`MyRequest`);
this.info = list.sort(function(a, b) {
var nameA = a.formattedName.toUpperCase();
var nameB = b.formattedName.toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
});
} catch (e) {
console.log(`getList`, e);
if (e.response.status === 400) {
this.error = e.response.data.message;
}
}
}
},
created() {
this.getList();
}