Is it possible to show a component when a checkbox is clicked? I am creating a dashboard and need to choose which tools to display on my screen.
I have set up checkboxes with v-model="select", value="name of component", and used v-for for list rendering. However, only the value is displayed, not the actual component.
In this example on JSFiddle, I am trying to show different tools but nothing is happening. I want to display a name in the select menu that is different from the component name. 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: [],
}
}
})