CODEWITHSUNDEEP
javascriptvue.js
Randy Hall
Randy Hall

Reputation: 8177

Vue.js dynamic component with dynamic data

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.

Upvotes: 1

Views: 2695

Answers (2)

Jacob Goh
Jacob Goh

Reputation: 20845

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>

Upvotes: 1

A. L
A. L

Reputation: 12689

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

Upvotes: 1

Related Questions