CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
TheDevGuy
TheDevGuy

Reputation: 703

Display component with checkbox

I want to know if ,it's possible to display a component on clicking a checkbox. I make a dashboard and I need to select the tools that I want to see in my screen.

I have made checkbox with v-model="select", value="name of component" and next a list rendering with v-for, but it only display the value, not the component.

In the fiddle , I want to display different tools, but nothing happen. I want display a name in select menu different of 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: [],
     }
   }
})

Upvotes: 1

Views: 154

Answers (1)

Ayrton
Ayrton

Reputation: 2303

You can do it using dynamic components: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

I've edited your fiddle to suit your use-case, check it out: https://jsfiddle.net/z8v1pq5j/

To show a different text from the component name, the items you use should be objects with the text (label) and value properties.

Upvotes: 2

Related Questions