javascript - 如何使用 v-for 有条件地显示图标?
问题描述
我有一个数据集,我正在对其进行迭代以在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>
我尝试设置 av-if = props.item.icon == 'GF'
但似乎没有用。任何帮助将不胜感激。谢谢你。
解决方案
一种方法是添加要渲染的图标列表,然后使用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>
这样你就有了很好的可扩展解决方案:-)
推荐阅读
- c# - 在 C# 中获取 ODATA 元素名称和数据类型或迭代 EdmCollectionType
- amazon-web-services - Python 时区仅使用 AWS Lambda 中可用的模块?
- python - Python计算字典中的副本
- java - “x 无法解析或不是字段”。我怎样才能解决这个问题?加工
- c# - 如何通过井字游戏中的按钮重置网格?
- javascript - JavaScript/jQuery:API 调用后清除数据
- glob - 文件夹或文件名中的全局模式匹配字符串
- android - Android 平台 - Gradle 构建失败 - 错误是什么意思
- r - R中的预测给出错误的预测数量
- swift - 具有符合 CaseIterable、RawRepresentable 的关联值的枚举