我有一張桌子
<v-simple-table >
<template v-slot:default>
<thead>
<tr>
<th >Name</th>
<th >Operator</th>
<th >Value</th>
</tr>
</thead>
<tbody>
<tr v-for="item in item.details" :key="item.id">
<td>
<v-chip color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td>
<v-chip color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td>
<v-chip color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
我想添加一個 if-check 并且不顯示標簽批次。
是否可以在與 v-for 相同的行中添加 v-if？
我想隱藏如果
item.details.attribute_name == '標簽批次'
我做了這個
它有效，但我不確定這是否是最好的方法......
<v-simple-table >
<template v-slot:default>
<thead>
<tr>
<th >Name</th>
<th >Operator</th>
<th >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 color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td v-if="item.attribute_name != 'Label batch'">
<v-chip color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td v-if="item.attribute_name != 'Label batch'">
<v-chip color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
你們會怎么做呢？
uj5u.com熱心網友回復：
是否可以在與 v-for 相同的行中添加 v-if？
是的 ！正如您所提到的，這實際上是解決您的問題的好方法！
<tr v-for="item in item.details" :key="item.id" v-if="item.attribute_name != 'Label batch'">
....
</tr>
這樣做的另一個好方法是使用預先計算的（此處的檔案）值，您可以在其中洗掉您的值
它是這樣作業的：
computed: {
itemsWithoutLabelBatch(){
return this.item.details.filter(item => item.attribute_name !== 'Label batch')
}
}
而在template
<tr v-for="item in itemsWithoutLabelBatch" :key="item.id">
....
</tr>
uj5u.com熱心網友回復：
官方 Vue 檔案：
由于隱含優先級，不建議在同一元素上使用 v-if 和 v-for。有關詳細資訊，請參閱樣式指南。
我建議將 v-if 放在模板標簽中，這樣您就不必多次重復您的條件（而且它仍然很簡單）
<tbody>
<tr v-for="item in item.details" :key="item.id">
<template v-if="item.attribute_name != 'Label batch'">
<td>
<v-chip color="blue" label outlined>
{{ item.attribute_name }}
</v-chip>
</td>
<td>
<v-chip color="blue" label outlined>
{{ item.operator }}
</v-chip>
</td>
<td>
<v-chip color="blue" label outlined>
{{ item.value }}
</v-chip>
</td>
</template>
</tr>
</tbody>
uj5u.com熱心網友回復：
而不是在 HTML 模板中添加業務邏輯。您可以通過在腳本中使用Array.filter()方法來簡單地實作這一點。
作業演示：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/457862.html
標籤：Vue.js Vuejs2 Vue组件 Vuetify.js