0
168
VistasOcultar fila específica de una tabla
Tengo esta tabla simple:
<v-simple-table> <template v-slot:default class="my-20 py-20"> <thead> <tr> <th class="text-left">Attribute</th> <th class="text-left">Operator</th> <th class="text-left">Values</th> </tr> </thead> <tbody> <tr v-for="(ruleDetail, j) in ruleDetails"> <td>{{ ruleDetail.attribute_name }}</td> <td>{{ ruleDetail.operator_name }}</td> <td>{{ ruleDetail.value }}</td> </tr> </tbody> </template> </v-simple-table>Me gustaría ocultar la fila donde
ruleDetail.attribute_name == Label batch
¿Cuál es la mejor práctica para hacer eso?
//all from API //this.ruleDetails = response.data.details //tried to filter, but it's not working. this.ruleDetails = response.data.campaigns.filter((item) => { return item.attribute_name != 'Label batch' })
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Intente usar include en el filtro en la propiedad calculada:
computed: { filteredRules() { return this.ruleDetails.filter((item) => !item.attribute_name.toLowerCase().includes(('Label batch').toLowerCase()) } }y luego en templae:
<tr v-for="(ruleDetail, j) in filteredRules">
·
Juan Pablo Isaza
Denunciar
0
Su código es perfecto y debería funcionar. Una sugerencia, verifique de forma cruzada response.data.campaigns para ver si está obteniendo la respuesta adecuada en esto o no.
Demostración de trabajo según el código que publicaste :
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { campaigns: [ { attribute_name: 'UV Index (Current Weather)', operator_name: 'Lesser number', value: 7 }, { attribute_name: 'Temperature (Current Weather)', operator_name: 'Greater or equal number', value: 17 }, { attribute_name: 'Label batch', operator_name: 'Equal numbers', value: 66235 } ], ruleDetails: [] } }, mounted() { this.ruleDetails = this.campaigns.filter((item) => { return item.attribute_name != 'Label batch' }) } }) <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.4/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.6.4/dist/vuetify.min.css"/> <div id="app"> <v-app id="inspire"> <v-simple-table> <template v-slot:default> <thead> <tr> <th class="text-left">Attribute</th> <th class="text-left">Operator</th> <th class="text-left">Values</th> </tr> </thead> <tbody> <tr v-for="(ruleDetail, j) in ruleDetails"> <td>{{ ruleDetail.attribute_name }}</td> <td>{{ ruleDetail.operator_name }}</td> <td>{{ ruleDetail.value }}</td> </tr> </tbody> </template> </v-simple-table> </v-app> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta