如何使用 v-for 有条件地显示图标?

Question

我有一个数据集，我正在迭代该数据集以显示v-data-table中的某些字段。我怎样才能做到如果图标字段的值为G，会出现某个图标。如果它有F，将出现一个不同的图标，如果它有GF则两个图标将出现在同一行中。

这是一支样笔。

new Vue({
el: '#app',
data() {
return {
headers: [{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{
text: 'Calories',
value: 'calories'
},
{
text: 'Fat (g)',
value: 'fat'
},
{
text: 'Icon Field',
value: 'icon'
}
],
desserts: [{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
icon: 'GF'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
icon: 'F'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
icon: 'G'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
icon: 'GF'
},
]
}
}
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<v-app id="inspire">
<v-data-table :headers="headers" :items="desserts">
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td>{{ props.item.calories }}</td>
<td>{{ props.item.fat }}</td>
<td> {{ props.item.icon}} </td>
</template>
</v-data-table>
</v-app>
</div>

我尝试设置v-if = props.item.icon == 'GF'但这似乎不起作用。任何帮助将不胜感激。谢谢。

Answer 1

一种方法是添加要渲染的图标列表，然后使用v-for

链接到工作解决方案

// data
icons: {
F: ["gavel"],
G: ["event"],
GF: ["gavel", "event"]
},

// template

<td>
<v-icon v-for="icon in icons[props.item.icon]">{{icon}}</v-icon>
</td>

这样你就有了很好的可扩展解决方案：-(

Answer 2

你不能在 v-for 中使用 v-if。您可以过滤数组，然后迭代。

有一个有用的 Vue 最佳实践链接 https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

Answer 3

我不在 Vue 中编码，但这样的东西应该可以工作，你可以使用一个数组作为图标并使用"icons.map(icon => <>("等。

让甜点 = [

{
name: 'ice',
icon: 'G'
},
{
name: 'ice2',
icon: 'E'
},
{
name: 'ice3',
icon: 'F'
}

]

让图标 = {

val1: '',
val2: '',
val3: ''

};

甜点.forEach((甜点( => {

switch(dessert.icon){
case 'G':
icons.val1 = 'http://iconurl'
case 'E':
icons.val2 = 'http://iconurl'
case 'F':
icons.val3 = 'http://iconurl'
}

}(

Answer 4

使用 Vue 过滤器，有关更多信息，请从这里阅读 https://v2.vuejs.org/v2/guide/filters.html

...
filters: {
getIcon(value) {
if (value == "G") {
return "your icon"
}
else if (value == "GF") {
return "your icon"
}
else if (value == "F") {
return "your icon"
}
}
}
...

...
<td> {{ props.item.icon | getIcon}} </td>
...