i am beginner in vue js I want to filter the search based on the checked checkbox, the problem if I check the all checkboxes I don't get a result

<template>
    <input type="checkbox" id="fr" value="fruits" v-model="sel">
        <label for="fr">fruits</label>
        <input type="checkbox" id="leg" value="vegetable" v-model="sel">
        <label for="leg">vegetable</label>
    
    
          <ul v-for="i in ar " :key="i">
            <li>{{i.title}}</li>
            <li>{{i.category}}</li>
            <li>{{i.uri}}</li>
          </ul> 
    </template>
    <script>
     data(){
        return{
          sel:[],
          tab:[
            {title:"aaa",uri:"aaaa.com",category:"fruits",icon:null},
         {title:"add",uri:"aaaa.com",category:"vegetable",icon:null},
          {title:"aff",uri:"aaaa.com",category:"fruits",icon:null},
        {title:"bbb",uri:"bbbb.com",category:"vegetable",icon:null},
        {title:"bdd",uri:"bbbb.com",category:"fruits",icon:null}
          ]
        }
      },
      computed:{
         ar(){
         return this.tab.filter((item)=>{
           return item.category.includes(this.sel)
         })
          
        }
      }
    </script>

CodePudding user response：

this.sel is an array, You want to check if any of the term is in the category using some method:

ar(){
  return this.tab.filter((item)=>{
    return this.sel.some(term => item.category.includes(term))
  })
}