Estoy en Vue2 y tengo una tabla, creada por un v-for , con las filas que tienen una clase de "incluido" o "todos los resultados", según una condición.
Necesito mostrar/ocultar solo las filas de la tabla con una clase de "incluido" cuando activé un interruptor ( dataShow ) que tiene un valor de all o selected .
He escrito un método simple para eso, pero me gustaría implementar esta función directamente en la plantilla vue, verificando si cada fila de la tabla tiene una clase selected y ocultarla.
Gracias de antemano por la ayuda
<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>¿Qué tal usar v-if o v-show para alternar las filas?
<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>Si desea usar la clase para alternar la visibilidad, debe configurar css. Algo como esto...
<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>