Javascript 使用复选框显示组件

我想知道是否可以单击复选框显示组件。 我制作了一个仪表板，我需要选择我想在屏幕上看到的工具

我已选中了v-model=select，value=component名称的复选框 接下来使用v-for进行列表渲染，但它只显示值，而不显示组件

在小提琴中，我想显示不同的工具，但什么也没发生。 我想在“选择”菜单中显示与组件名称不同的名称。

---

可以使用动态组件执行此操作：

我已经编辑了您的小提琴以适合您的用例，请查看：

---

要显示与组件名称不同的文本，您使用的项目应该是具有文本标签和值属性的对象。

查找动态组件的使用-动态组件看起来不错，但如何在我的案例中使用复选框？请给我一些帮助。有相同的v型是可行的，因为我有很多组件，我不想有几个v型，只有一个带数组就好了。我怎么能用它来选择多个，你能在你的提琴里给我看吗？我会在几分钟后测试它。这对我来说不起作用，我已经更新了我的帖子

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
<v-app >
<v-select
    v-model="selectedTools"
    :items="tools"
    label="Select"
    multiple
></v-select>


 </v-app>
</div>

Vue.component('comp_hammer', {
    template: `<span>Tool 1</span>`
});

Vue.component('comp_screw', {
    template: `<span>Tool 2</span>`
});

Vue.component('comp_drill', {
    template: `<span>Tool 3</span>`
});

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {


  },
  data() {
    return {
        tools:['tool 1', 'tool 2', 'tool 3'],
        selectedTools: [],
     }
   }
})