'Vuetify Table - Filter out specific row
I have a table
<v-simple-table class="condition-table">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Operator</th>
<th class="text-left">Value</th>
</tr>
</thead>
<tbody>
<tr v-for="item in item.details" :key="item.id">
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
I would like to add an if-check and not show label batch.
Is it possible to add a v-if in the same line as v-for?
I want to hide if
item.details.attribute_name == 'label batch'
I did this
it works, but I am not sure if this is the best way ...
<v-simple-table class="condition-table">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Operator</th>
<th class="text-left">Value</th>
</tr>
</thead>
<tbody>
<tr v-for="item in item.details" :key="item.id">
<td v-if="item.attribute_name != 'Label batch'">
<v-chip class="ma-2" color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td v-if="item.attribute_name != 'Label batch'">
<v-chip class="ma-2" color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td v-if="item.attribute_name != 'Label batch'">
<v-chip class="ma-2" color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
How would you guys do that ?
Solution 1:[1]
Is it possible to add a v-if in the same line as v-for?
Yes ! And as you mentioned, it is actually a good way of solving your problem !
<tr v-for="item in item.details" :key="item.id" v-if="item.attribute_name != 'Label batch'">
....
</tr>
Another good way of doing this is by using pre-computed (documentation here) values where you remove your value
It works like this :
computed: {
itemsWithoutLabelBatch(){
return this.item.details.filter(item => item.attribute_name !== 'Label batch')
}
}
And in the template
<tr v-for="item in itemsWithoutLabelBatch" :key="item.id">
....
</tr>
Solution 2:[2]
Official Vue Doc :
It's not recommended to use v-if and v-for on the same element due to implicit precedence. Refer to style guide for details.
What I recommend is to put the v-if in a template tag so you don't have to repeat your condition several times (and it's still simple)
<tbody>
<tr v-for="item in item.details" :key="item.id">
<template v-if="item.attribute_name != 'Label batch'">
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</template>
</tr>
</tbody>
Solution 3:[3]
Instead of adding business logic in the HTML template. You can simply achieve that by using Array.filter() method in your script.
Working Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
item: {
details: [
{
id: 1,
attribute_name: 'Label batch',
operator: '+',
value: '66649'
},
{
id: 2,
attribute_name: 'Style Name',
operator: '=',
value: '222'
}
],
}
}
},
mounted() {
this.item.details = this.item.details.filter((obj) => obj.attribute_name !== 'Label batch')
}
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-simple-table class="condition-table">
<template v-slot:default>
<thead>
<tr>
<th class="text-left">Name</th>
<th class="text-left">Operator</th>
<th class="text-left">Value</th>
</tr>
</thead>
<tbody>
<tr v-for="item in item.details" :key="item.id">
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td>
<v-chip class="ma-2" color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
</v-app>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | RenaudC5 |
| Solution 2 | Florent Bouisset |
| Solution 3 |