I am trying to create dynamic input component that will be interchangeable between input and textarea tag. I am trying to implement this by using render function. (https://vuejs.org/v2/guide/render-function.html#v-model).
The problem I have is that v-model works only one way, if I change data property directly it updates textarea value, but if I change or input new data into textarea it does not update the data property. Does anyone know how to make it work both ways? Here is my code link for code pen is bellow it illustrates the problem:
const tag = Vue.component('dynamic-tag', {
name: 'dynamic-tag',
render(createElement) {
return createElement(
this.tag,
{
domProps: {
value: this.value
},
on: {
input: event => {
this.value = event.target.value
}
}
},
this.$slots.default
)
},
props: {
tag: {
type: String,
required: true
}
}
})
const app = new Vue({
el: '#app',
data: {
message: ''
},
components: {tag}
})
http://codepen.io/asolopovas/pen/OpWVxa?editors=1011
You need to $emit
changes from your input.
on: {
input: event => {
this.value = event.target.value
this.$emit('input', event.target.value)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With