Vue 按选择的选项搜索 - 不能按 id 搜索，即使选择了 [英] Vue searching by the chosen option – can not search by id, even if chosen
本文介绍了Vue 按选择的选项搜索 - 不能按 id 搜索，即使选择了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
#1 不能通过 id 搜索，即使选择了.循环中的名称"条件运行良好，但我无法通过 if 进行正确的搜索(不搜索).
#2 当我选择选择选项时，它会一直显示直到我开始输入.即使打字，我也想保持显示.
name: 'CharactersList',数据:函数(){返回 {选择:'',搜索查询:'',列表: []，页数:1}},计算:{过滤列表(){if (this.selected === 'Charactername' && this.searchQuery) {返回 this.list.filter((item) => {返回 item.name.toLowerCase().includes(this.searchQuery)})} else if (this.selected === 'Id' && this.searchQuery) {返回 this.list.filter((item) => {返回 item.id.includes(this.searchQuery)})} 别的 {返回 this.list}}},<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><select v-model="selected"><option disabled value="" required>搜索方式</option><option class="charactername">姓名</option><option class="episode">Episode</option><option class="id">Id</option></选择><input v-model="searchQuery" type="text" placeholder="Type here..."><table><span class="allcharacters">All</span><tr class="wrapper-top-bar"><td>照片</td><td>ID</td><td>姓名</td><td>性别</td><td>物种</td><td>最后一集</td><td>添加到收藏夹</td></tr><tr class="wrapper-list-table" v-for="过滤列表中的项目" v-bind:key="item.id"><td><img v-bind:src="item.image"/></td><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.gender}}</td><td>{{item.species}}</td><td>{{}}</td><td><button>⭐</button></td></tr></table>
解决方案
第 1 步:用虚拟模型创建
数据:函数(){返回 {选择:"，搜索查询:"，列表: [{编号:1，名称:杰巴"，性别:男"，物种:人类"，插曲:《权力的游戏》},{编号:2，名称:维罗尼卡"，性别:女性"，物种:人类"，插曲:《老友记》},{编号:3，名称:帕内克"，性别:男"，物种:人类"，插曲:《越狱》}],页数:1};},第 2 步:计算方法修改如下
计算:{过滤列表(){如果(this.searchQuery && this.selected){返回 this.list.filter(item => {if (this.selected === "name" || this.selected === "episode") {返回 (item[this.selected] &&项目[this.selected].toLowerCase().includes(this.searchQuery.toLowerCase()));} 别的 {返回 (item[this.selected] &&item[this.selected].toString() === this.searchQuery.toString());}});} 别的 {返回 this.list;}}}第 3 步:HTML 模板将如下所示
<select v-model="selected"><选项禁用值="必填>搜索方式</option><option value="name">Name</option><option value=episode">Episode</option><option value=id">Id</option></选择><input v-model="searchQuery"类型=文本"placeholder="在此处输入..."><table><span class="allcharacters">All</span><tr class="wrapper-top-bar"><td>照片</td><td>ID</td><td>姓名</td><td>性别</td><td>物种</td><td>最后一集</td><td>添加到收藏夹</td></tr><tr class="wrapper-list-table";v-for=已过滤列表中的项目"；v-bind:key=item.id"><td><img v-bind:src=item.image"/></td><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.gender}}</td><td>{{item.species}}</td><td>{{item.episode}}</td><td><button>⭐</button></td></tr>#1 Can not search by id, even if chosen. The 'name' condition in the loop works well but I can not sign correctly searching by if (search nothing).
#2 When I choose the select option it displays until I start typing. I want to keep it displayed even if typing.
name: 'CharactersList',
data: function () {
return {
selected: '',
searchQuery: '',
list: [],
page: 1
}
},
computed: {
filteredList () {
if (this.selected === 'Charactername' && this.searchQuery) {
return this.list.filter((item) => {
return item.name.toLowerCase().includes(this.searchQuery)
})
} else if (this.selected === 'Id' && this.searchQuery) {
return this.list.filter((item) => {
return item.id.includes(this.searchQuery)
})
} else {
return this.list
}
}
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<select v-model="selected">
<option disabled value="" required>Search by</option>
<option class="charactername">Name</option>
<option class="episode">Episode</option>
<option class="id">Id</option>
</select>
<input v-model="searchQuery" type="text" placeholder="Type here...">
</div>
<table><span class="allcharacters">All</span>
<tr class="wrapper-top-bar">
<td>Photo</td>
<td>ID</td>
<td>Name</td>
<td>Gender</td>
<td>Species</td>
<td>Last episode</td>
<td>Add to fav</td>
</tr>
<tr class="wrapper-list-table" v-for="item in filteredList" v-bind:key="item.id">
<td><img v-bind:src="item.image"/></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.species}}</td>
<td>{{}}</td>
<td><button>⭐</button></td>
</tr>
</table>
</table>
解决方案
Step 1: Created with dummy model
data: function() {
return {
selected: "",
searchQuery: "",
list: [
{
id: 1,
name: "Jeba",
gender: "Male",
species: "Human",
episode: "Game of Thrones"
},
{
id: 2,
name: "Weronika",
gender: "Female",
species: "Human",
episode: "Friends"
},
{
id: 3,
name: "Panek",
gender: "Male",
species: "Human",
episode: "Prison Break"
}
],
page: 1
};
},
Step 2: Computed method modified as like below
computed: {
filteredList() {
if (this.searchQuery && this.selected) {
return this.list.filter(item => {
if (this.selected === "name" || this.selected === "episode") {
return (
item[this.selected] &&
item[this.selected]
.toLowerCase()
.includes(this.searchQuery.toLowerCase())
);
} else {
return (
item[this.selected] &&
item[this.selected].toString() === this.searchQuery.toString()
);
}
});
} else {
return this.list;
}
}
}
Step 3: HTML template will be like below
<div>
<select v-model="selected">
<option disabled value="" required>Search by</option>
<option value="name">Name</option>
<option value="episode">Episode</option>
<option value="id">Id</option>
</select>
<input v-model="searchQuery" type="text" placeholder="Type here...">
<table><span class="allcharacters">All</span>
<tr class="wrapper-top-bar">
<td>Photo</td>
<td>ID</td>
<td>Name</td>
<td>Gender</td>
<td>Species</td>
<td>Last episode</td>
<td>Add to fav</td>
</tr>
<tr class="wrapper-list-table" v-for="item in filteredList" v-bind:key="item.id">
<td><img v-bind:src="item.image"/></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.species}}</td>
<td>{{item.episode}}</td>
<td><button>⭐</button></td>
</tr>
</table>
</div>
这篇关于Vue 按选择的选项搜索 - 不能按 id 搜索，即使选择了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
