VUEJS:使用输入和复选框过滤数据
我想使用输入和复选框过滤我的数据。以下是您可以看到但无法正常工作的代码脚本。根据脚本;当未在输入字段中输入文本时,即使检查了复选框,即使检查它们也无法正常工作。我在哪里做错了?
<input v-model="search_all_task">
<input type="checkbox" class="form-check-input" true-value="title1" false-value="" v-model="dashSelect3" @id="dashSelect1 = $event.target.value" id="checkbox1">
<label class="form-check-label" for="checkbox1">Title 1</label>
<input type="checkbox" class="form-check-input" true-value="title2" false-value="" v-model="dashSelect3" @id="dashSelect2 = $event.target.value" id="checkbox2">
<label class="form-check-label" for="checkbox2">Title 2</label>
<input type="checkbox" class="form-check-input" true-value="title3" false-value="" v-model="dashSelect3" @id="dashSelect3 = $event.target.value" id="checkbox1">
<label class="form-check-label" for="checkbox1">Title 3</label>
data() {
return {
allTaskDashboard : [
{ id: 1, title: "title1", content: "content1" },
{ id: 2, title: "title2", content: "content2" },
{ id: 3, title: "title3", content: "content3" }
]
}
},
computed:{
filterDashboardTask(){
return this.allTaskDashboard.filter(item =>{
return(
this.search_all_task.length === 0 || item.content.toLowerCase().includes(this.search_all_task.toLowerCase())
|| this.dashSelect2.includes(item.title)
|| this.dashSelect1.includes(item.title)
|| this.dashSelect3.includes(item.title)
)
});
},
}
<div v-for="item in filterDashboardTask">
// This another parametres
</div>
I want to filter my data using input and checkbox. Below is the code script that works as you can see but does not work as I want it to. According to the script; When no text is entered in the input field, the checkboxes do not work even if they are checked. Where could I be doing wrong?
<input v-model="search_all_task">
<input type="checkbox" class="form-check-input" true-value="title1" false-value="" v-model="dashSelect3" @id="dashSelect1 = $event.target.value" id="checkbox1">
<label class="form-check-label" for="checkbox1">Title 1</label>
<input type="checkbox" class="form-check-input" true-value="title2" false-value="" v-model="dashSelect3" @id="dashSelect2 = $event.target.value" id="checkbox2">
<label class="form-check-label" for="checkbox2">Title 2</label>
<input type="checkbox" class="form-check-input" true-value="title3" false-value="" v-model="dashSelect3" @id="dashSelect3 = $event.target.value" id="checkbox1">
<label class="form-check-label" for="checkbox1">Title 3</label>
data() {
return {
allTaskDashboard : [
{ id: 1, title: "title1", content: "content1" },
{ id: 2, title: "title2", content: "content2" },
{ id: 3, title: "title3", content: "content3" }
]
}
},
computed:{
filterDashboardTask(){
return this.allTaskDashboard.filter(item =>{
return(
this.search_all_task.length === 0 || item.content.toLowerCase().includes(this.search_all_task.toLowerCase())
|| this.dashSelect2.includes(item.title)
|| this.dashSelect1.includes(item.title)
|| this.dashSelect3.includes(item.title)
)
});
},
}
<div v-for="item in filterDashboardTask">
// This another parametres
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论