I am currently working on developing a straightforward task scheduler that includes filtering options using checkboxes.
Below is the snippet from my vue file:
Within my templates section,
<fieldset>
<legend>TASK STATUS</legend>
<span v-for="(item, index) in checkboxObj" :key="index">
<input type="checkbox" v-model="task" :value=item.value>
{{ item.name }}
</span>
</fieldset>
<v-simple-table>
<thead>
<tr>
<th>TASK</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in filteredData" :key="index">
<td>{{ data.task }}</td>
<td>{{ data.status }}</td>
</tr>
</tbody>
</v-simple-table>
In my data setup,
data(){
return{
recordList:[
{task:'Cleaning Garage',status:'Due Today'},
{task:'Checking Tools',status:'Overdue'},
{task:'Repair Bikes',status:'Due Tomorrow'}
],
task:[],
checkboxObj: [
{name:'OVERDUE',value:'Overdue'},
{name:'DUE TODAY',value:'Due Today'},
{name:'DUE TOMORROW',value:'Due Tomorrow'}
]
}
}
Additionally, I have implemented this computed function:
computed:{
filteredData() {
if(this.task){
for(let i = 0; i < this.task.length; i++){
return this.recordList.filter((item) => {
return item.status.toUpperCase().includes(this.task[i].toString().toUpperCase())
})
}
}else{
return this.recordList
}
}
}
My goal is to display the status results whenever a checkbox is checked. Multiple checkboxes can be selected for combined filtering purposes, resulting in an output similar to the following example images:
ORIGINAL IMAGE https://i.sstatic.net/tqR2r.png
DESIRED OUTPUT https://i.sstatic.net/PnNWC.png