Skip to content Skip to sidebar Skip to footer

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"