Vue.js dynamic component with dynamic data

Question

I'm trying to use the <component> element to dynamically display a chosen component. Each of these displayed components can take one of any number of data objects. Something like:

<div id="containers">
    <component v-bind:is="currentView"></component>
</div>

var myVue = new Vue({
    el:"#containers",
    data:{
        currentView: "my-component-one",
        currentData: {...}
    },
    method: {
        changeView: function(){
            //change this.currentView
            //change this.currentData
        }
    }
});

However, the Vue documentation says the v-bind:is attribute can be used to pass either a component name or the options object.

It is unclear how I would conditionally get an object of values for that component to use and also conditionally change which component is shown.

I am very green with using Vue (coming fresh off a knockout kick) so perhaps I am simply misunderstanding the intention of the component tag.

A. L · Accepted Answer · 2018-11-01 01:55:18Z

1

you can simply use v-bind

html

<component v-bind:is="currentView" v-bind="data"></component>

script

data()
{
    return {
        data: {
            currentData: "example"
        } 
    }
}

and it will pass currentData down to child. You can also add other properties along with it, including is.

If you need to change the component along with props, then you just change the data property, or whatever you want to call it.

https://codesandbox.io/s/7w81o10mlx

answered Nov 1, 2018 at 1:55

A. L

12.7k29 gold badges100 silver badges179 bronze badges

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

Comments

Penny Liu · Accepted Answer · 2022-04-01 13:48:29Z

1

This example might help you understand it. https://jsfiddle.net/jacobgoh101/mLbrj5gd/

For passing Component Name

If the component is global, you can pass the component name to v-bind:is

for e.g.,

Vue.component('test1', {
    template: `<div>test1</div>`
})

HTML

<component is="test1"></component>

For passing option

A Vue component is literally just a Javascript object with specific properties

for e.g.,

  <component v-bind:is="{
    template: `<div>test2</div>`
  }"></component>

edited Apr 1, 2022 at 13:48

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Nov 1, 2018 at 1:57

Jacob Goh

20.9k5 gold badges57 silver badges75 bronze badges

Collectives™ on Stack Overflow

Vue.js dynamic component with dynamic data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related