VUEJS:使用输入和复选框过滤数据

发布于 2025-02-08 05:25:36 字数 1681 浏览 0 评论 0原文

我想使用输入和复选框过滤我的数据。以下是您可以看到但无法正常工作的代码脚本。根据脚本;当未在输入字段中输入文本时,即使检查了复选框,即使检查它们也无法正常工作。我在哪里做错了?

<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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文