am trying to create a dynamic component in a defined component as below :
main component ( should dynamically create the component extform-input when called )
...
components: {
'extform-input' : ExtformInput
},
methods : {
changeType: function () {
var self = this
var TheComponent = this.$options.components['extform-input'];
self.$addChild(TheComponent);
}
...
i get error self.$addChild is not a function
If component is already mounted ie defined as a component globally using Vue(tag,constructor) then simply adding a new instance of component importantly using parent keyword to define parent of component instance will do the trick as below :
NB : As of vue js V-1.0.12, $addChild method was removed
components: {
'extform-input' : ExtformInput
},
methods : {
changeType: function() {
var self = this
var Child = this.$options.components['extform-input'];
var child = new Child({
el: this.$el.querySelector('.child-host'), \\ define the el of component
parent: this, \\ define parent of component
});
}
}
See codepen demo http://codepen.io/obonyojimmy/pen/ONwKZX
You can't dynamically instantiate components in Vue js. Here is a discussion about the subject, and a similar question (I did that question). But, even if you can't dynamically add components, you can do what you want to do, in a different way. Instead of adding the child, you have to show it adding it to the DOM, if you want to add a single component use v-if (notiche that you are not hidding/showing an element, you are adding/removing from the DOM). And if you want to add a variable number of component on the fly, use v-for. The details are on the referenced question for the v-for way
vm.$addChildis still in vue 1.0? I can't find it in the documentation.