javascript - v-model implementation via render function is not reactive - Stack Overflow

admin管理员组

文章数量:1399509

I am trying to create dynamic input ponent that will be interchangeable between input and textarea tag. I am trying to implement this by using 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 = Vueponent('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: ''
  },
  ponents: {tag}
})

I am trying to create dynamic input ponent that will be interchangeable between input and textarea tag. I am trying to implement this by using render function. (https://v2.vuejs/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.ponent('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: ''
  },
  ponents: {tag}
})

http://codepen.io/asolopovas/pen/OpWVxa?editors=1011

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 13, 2022 at 23:02 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Mar 8, 2017 at 16:26 Andrius SolopovasAndrius Solopovas 1,0571717 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You need to $emit changes from your input.

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

The problem is that you are using v-model with a custom ponent. When using with ponent 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 ponent, your ponent must have value prop and emit input event with the changed value.

I will leave further explanations to the documentation

本文标签： javascriptvmodel implementation via render function is not reactiveStack Overflow