javascript - 显示带有复选框的组件

Question

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

我用 v-model="select", value="name of component"创建了复选框接下来是一个用 v-for 渲染的列表，但它只显示值，不显示组件。

在 fiddle 中，我想显示不同的工具，但没有任何反应。我想在选择菜单中显示一个与组件名称不同的名称。 https://jsfiddle.net/sebastianczech/2wfapuv4/85/

<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: [],
     }
   }
})

Answer 1

您可以使用动态组件来做到这一点:https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

我已根据您的用例编辑了您的 fiddle ，请查看:https://jsfiddle.net/z8v1pq5j/

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