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

Question

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

这是一个示例 pen .

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

link to working solution

// 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>

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