Filter by class in a Vue table, generated with v-for

user_13818273 0
Viewed 32

I'm in Vue2 and I have a table, created by a v-for, with the rows that have a class of "included" or "allResults", based on a condition.

I need to show/hide only the table rows with a class of "included" when I trigger a switch (dataShow) that has a value of all or selected.

I've written a simple method for that but I would like to implement this function directly in the vue template, checking if every table row has a class of selected and hide it.

thanks in advance for help

<input v-model="dataShow" true-value="selected" false-value="all" type="checkbox" name="Show all or selected" />


<tbody>
  <tr v-for="(comparable, index) in sortedSelectedComparables" :class="watchedProperty.map(el => el.idorg).includes(comparable.idorg) ? 'included' : 'allResults'">
    <td>{{ Math.round(comparable.distance) + 'm'}}</td>
    <td>{{ comparable.address }}</td>
    <td>{{ comparable.startdate }}</td>
    <td>{{ comparable.usedetail_en }}</td>
  </tr>
</tbody>
vuejs2 vue.js javascript
1 Answers

How about using v-if or v-show to toggle the rows?

  • If dataShow is false, show all rows
  • or, if dataShow is true, show only the rows listed in watchedProperty
<tbody>
  <tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
    <td>{{ Math.round(comparable.distance) + 'm'}}</td>
    <td>{{ comparable.address }}</td>
    <td>{{ comparable.startdate }}</td>
    <td>{{ comparable.usedetail_en }}</td>
  </tr>
</tbody>

If you'd like to use class to toggle the visibility, you need to set css. Something like this...

<table :class="{'showAll': !dataShow}">
  <tbody>
    <tr v-for="(comparable, index) in sortedSelectedComparables" v-if="!dataShow || watchedProperty.map(el => el.idorg).includes(comparable.idorg)">
      <td>{{ Math.round(comparable.distance) + 'm'}}</td>
      <td>{{ comparable.address }}</td>
      <td>{{ comparable.startdate }}</td>
      <td>{{ comparable.usedetail_en }}</td>
    </tr>
  </tbody>
</table>

<style scoped lang="scss">
  table.showAll td:not(.included) {
    display: none;
  }
</style>
user_79546540
Related