Question

我有三个组件图标<DiscoverIcon>，<FeedIcon>，<ProfileIcon>，并且在标签循环中，我希望能够为每个相应的标题使用不同的图标。

我尝试了

这样的列表元素

{ key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'}

并同时呼叫{{ link.icon }}和

{ key: 1, text: 'Discover', route: '/discover'}

并致电<div class='iconbgd'><{{link.text}}Icon /></div>

<template>
  <v-tabs fixed-tabs>
    <v-tab
      v-for="link in links"
      :key="link.key"
    >
      <div class='iconbgd'><{{link.text}}Icon /></div><h4>{{ link.text }}</h4>
    </v-tab>
  </v-tabs>
</template>
<script>
import DiscoverIcon from '../components/icons/DiscoverIcon'
import FeedIcon from '../components/icons/FeedIcon'
import ProfileIcon from '../components/icons/ProfileIcon' 

export default {
  components: {
      DiscoverIcon,
      FeedIcon,
      ProfileIcon
    },
  name: 'App',
  data () {
    return {
      links: [
          { key: 1, icon: <div class='iconbgd'><DiscoverIcon /></div>, text: 'Discover', route: '/discover'},
          { key: 2, icon: <div class='iconbgd'><FeedIcon /></div>, text: 'Feed', route: '/feed'},
          { key: 3, icon: <div class='iconbgd'><ProfileIcon /></div>, text: 'Profile', route: '/profile'}
      ]
    }
  }
}
</script>


<style>
.iconbgd svg{
  fill:url(#grad1);
  width: 30px;
  height: auto;
  padding-right: 5px;
}
</style>

这是此用例的Vuetify选项卡组件，但使其正常工作与使用选项卡无关，但我的预期结果是能够循环浏览，并且在每个选项卡中使用不同的相关组件，而不仅仅是创建三个单独的组件我当前拥有的按钮。

Answer 1

首先{{link.icon}}并不是要显示为HTML。您应该使用其他方法。

<div class='iconbgd'><{{link.text}}Icon />等于<div class='iconbgd' v-text="link.text"><Icon />。因此，Vue为HTML提供了v-html指令，您可以阅读here more about the varieties of directives。

在可能的情况下，仍应尽量避免使用v-html，并且由于不同的{{link.icon}}非常相似，因此您可以在没有v-html的情况下轻松进行工作。

这似乎是您试图绑定组件<{{link.text}}Icon />。 Dynamic components是您所需要的，而且功能非常强大。

我迅速查看了v-tabs的Vuetify文档，并对其进行了一些更改，但是我以前从未使用过它，并且未经测试。这应该是您要实现的目标：

<template>
  <v-tabs fixed-tabs>
    <v-tab v-for="link in links" :key="link.key">
      <div class="iconbgd">{{link.label}}</div>
    </v-tab>
    <v-tab-item v-for="link in links" :key="link.key">
      <h4>{{link.label}}</h4>
      <component :is="link.label + 'Icon'" :key="link.key"/>
    </v-tab-item>
  </v-tabs>
</template>

<script>
import DiscoverIcon from '../components/icons/DiscoverIcon';
import FeedIcon from '../components/icons/FeedIcon';
import ProfileIcon from '../components/icons/ProfileIcon';

export default {
  data() {
    return {
      links: [
        {
          key: 1,
          label: 'Discover',
          route: '/discover'
        },
        {
          key: 2,
          label: 'Feed',
          route: '/feed'
        },
        {
          key: 3,
          label: 'Profile',
          route: '/profile'
        }
      ]
    };
  },
  name: 'App',
  components: {
    DiscoverIcon,
    FeedIcon,
    ProfileIcon
  }
};
</script>


<style>
.iconbgd svg {
  fill: url(#grad1);
  width: 30px;
  height: auto;
  padding-right: 5px;
}
</style>

Answer 2

非常感谢！对此进行了一些调整，就可以了。

<v-tabs fixed-tabs color='transparent' slider-color='#1341B2'>
         <v-tab v-for="link in links" :key="link.key" :to="link.route">
            <div class="iconbgd">
                <component :is="link.label + 'Icon'" :key="link.key"/>
            </div>
            <h4>{{link.label}}</h4>
        </v-tab>
    </v-tabs>

可以从数据中命名组件吗？

2 个答案: