Component 可以根据数据命名吗？

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 有一个 v-html 指令用于 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>

Component 可以根据数据命名吗？

Can a Component be named from data?

vue.js

vue-router

vue-component

vuetify.js