I'm working with checkboxes to toggle the visibility of specific rows in a table based on their content matching the selected checkbox values.
Checkboxes:
<input type='checkbox' name='foo1' value='foo1' v-model="selectedType"/> foo1
<input type='checkbox' name='foo2' value='foo2' v-model="selectedType"/> foo2
<input type='checkbox' name='bar1' value='bar1' v-model="selectedType"/> bar1
I have structured a table using an object and the v-for directive:
<table>
<template v-for="sampleItem in sampleObj">
<tr>
<td>{{sampleItem.item}}</td>
<td>{{sampleItem.description}}</td>
</tr>
</template>
</table>
JS:
new Vue({
data: {
selectedType: [],
sampleObj = [{'item': 'item1', 'description': 'foo1 blah'},
{'item': 'item2', 'description': 'foo2 vlah'},
{'item': 'item3', 'description': 'bar1 nlah'},
{'item': 'item4', 'description': 'bar2 clah'},
];
}
});
The checkboxes start unchecked, displaying only the row with description 'bar2'. Toggling other checkboxes should make other rows visible based on partial matches in descriptions (not exact).
I wanted to use the v-if directive within the tag to check against selectedType values, but I am unsure how to implement this.
Pseudo-code:
<tr v-if="selectedType ~= /sampleItem.description/">
...
...
</tr>
Any suggestions on how to achieve this functionality?