I have a custom component developed with Vue.js. The component is a wrapper that can dynamically create another component given parameters per parameter.
The problem I have is when using the v-model of that dynamic component and linking it to the model of the parent view, the value is not sent.
parent view
<component-wrapper v-model="wrapperValue" v-bind:childElement="{
elementTag: 'b-form-input',
childProps: {
attrs: {
id: 'foo'
},
}
}"/>
<p style="clear:both;">Wrapper value: {{wrapperValue}}</p>
component-wrapper.js
<script lang="ts">
import Vue from 'vue';
export default Vue.component('component-wrapper', {
render: function(createElement) {
return createElement(this.childElement.elementTag, this.childElement.childProps);
},
data() {
return {
};
},
mounted: function() {
},
props: {
childElement: Object,
},
methods: {
}
});
</script>
To modify the property that is passed through v-model you must emit an event to the parent component using the
$emit(event, value)
.Keep in mind that
v-model="variable"
it is just a shorthand way of expressing :As you can see, the parent component expects the child component to emit an input event (Default) and binds the value property (Default), its variable property, to the child component .
If you want the name of the event or the property bound to the child to be different from the default ones, but still be able to use v-model , you must declare the name of these in the model property of the child component:
Here you have an example, as you can see we can modify the value of the property from the parent component without problems, but for the communication from the child to the parent an event must be launched: