[英]Hide specific row of a table
I have this simple table:我有这个简单的表:
<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>
I would like to hide the row where我想隐藏行
ruleDetail.attribute_name == Label batch
What is the best practice to do that?这样做的最佳做法是什么?
//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'
})
Try to use includes in filter in computed property:尝试在计算属性中使用 includes in filter:
computed: {
filteredRules() {
return this.ruleDetails.filter((item) => !item.attribute_name.toLowerCase().includes(('Label batch').toLowerCase())
}
}
and then in templae:然后在模板中:
<tr v-for="(ruleDetail, j) in filteredRules">
Your code is perfect and it should work.您的代码是完美的,它应该可以工作。 One suggestion, cross check
response.data.campaigns
to see if you are getting the proper response in this or not.一个建议是,交叉检查
response.data.campaigns
看看你是否得到了正确的回应。
Working Demo as per the code you posted :根据您发布的代码进行工作演示:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.