Display component with checkbox

Question

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

Look up use of dynamic components - vuejs.org/v2/guide/components.html#Dynamic-Components — Konrad Słotwiński
– Konrad Słotwiński, Commented Oct 31, 2019 at 13:31

tony19 · Accepted Answer · 2022-07-15 02:32:47Z

2

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.

edited Jul 15, 2022 at 2:32

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Oct 31, 2019 at 13:31

Ayrton

2,3131 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

TheDevGuy Over a year ago

the dynamic component looks great , but How apply in my case with checkbox? some help please

TheDevGuy Over a year ago

it is pssible to have the same v-model, because I have a lots of component and I don't want to have several v-model, just one with array will be nice.

TheDevGuy Over a year ago

I how can use it with select multiple, can you show me in your fiddle ?

TheDevGuy Over a year ago

I'll test it in some minutes

TheDevGuy Over a year ago

that doesn't work form me like this, I've update my post

|

Collectives™ on Stack Overflow

Display component with checkbox

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related