Hide/show Table Rows Based On Checkbox
I have some checkboxes which I'd like to use to show/hide rows in a table whose contents match the values of the checkbox which is selected. Checkboxes:
Solution 1:
You actually have two conditions you need for the v-if: if there is no checkbox matching the description, you want the row to display; if there is a checkbox, it has to be checked.
I put the checkbox values into data, where they belong. I made a method for the test. It first looks to see whether the description matches any checkbox value, then it checks whether the matched value is selected.
new Vue({
el: '#app',
data: {
selectedType: [],
sampleObj: [{
'item': 'item1',
'description': 'foo1 blah'
},
{
'item': 'item2',
'description': 'foo2 vlah'
},
{
'item': 'item3',
'description': 'bar1 nlah'
},
{
'item': 'item4',
'description': 'bar2 clah'
},
],
cbValues: ['foo1', 'foo2', 'bar1']
},
methods: {
isVisible(row) {
const matchedValue = this.cbValues.find(v => row.description.indexOf(v) >= 0);
if (!matchedValue) {
return true;
}
return this.selectedType.includes(matchedValue);
}
}
});td {
border: thin solid black;
}<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<div v-for="val in cbValues">
<label>
<input type='checkbox' :value='val' v-model="selectedType">
{{val}}
</label>
</div>
<table>
<template v-for="sampleItem in sampleObj">
<tr v-if="isVisible(sampleItem)">
<td>{{sampleItem.item}}</td>
<td>{{sampleItem.description}}</td>
</tr>
</template>
</table>
</div>
Post a Comment for "Hide/show Table Rows Based On Checkbox"