根据复选框隐藏/显示表行

Question

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:

<input type='checkbox' name='foo1' value='foo1' v-model="selectedType"/> foo1 &nbsp;
<input type='checkbox' name='foo2' value='foo2' v-model="selectedType"/> foo2 &nbsp;
<input type='checkbox' name='bar1' value='bar1' v-model="selectedType"/> bar1 &nbsp;

I have an object which I used to construct a table using v-for:

<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'},
        ];
    }
});

By default, the checkboxes are unchecked. So, only the row which has a cell with description 'bar2' is initially visible. Then when I toggle the other checkboxes, the other rows should also become visible (the descriptions don't match the checkbox values verbatim but has a few words following it. I can do some string processing here).

I thought I could use the v-if directive in the tag to look at value of selectedType, but I am not sure how I can accomplish this.

Pseudo-code:

<tr v-if="selectedType ~= /sampleItem.description/">
...
...
</tr> 

How could I accomplish this?

Answer 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>