CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Andrius Solopovas
Andrius Solopovas

Reputation: 1057

v-model implementation via render function is not reactive

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://v2.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

Upvotes: 6

Views: 4882

Answers (2)

Rustem Kakimov
Rustem Kakimov

Reputation: 2671

The problem is that you are using v-model with a custom component. When using with component v-model="message" is just syntactic sugar for

v-bind:value="message"
v-on:input="value => { message = value }"

So to use v-model with custom component, your component must have value prop and emit input event with the changed value.

I will leave further explanations to the documentation

Upvotes: 1

Bert
Bert

Reputation: 82459

You need to $emit changes from your input.

on: {
    input: event => {
        this.value = event.target.value
        this.$emit('input', event.target.value)
    }
}

Upvotes: 5

Related Questions