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>
How about using v-if or v-show to toggle the rows?
<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>