Implementacja modelu v za pomocą funkcji renderowania nie jest reaktywna.

Question

Próbuję utworzyć dynamiczny komponent wejściowy, który będzie wymienny między wejściowym a tekstowym znacznikiem. Próbuję wprowadzić to za pomocą funkcji renderowania. (https://vuejs.org/v2/guide/render-function.html#v-model).

Problem polega na tym, że v-model działa tylko w jeden sposób, jeśli zmienię właściwość danych bezpośrednio, zaktualizuje wartość textarea, ale jeśli zmienię lub wprowadzę nowe dane do textarea, nie zaktualizuje ona właściwości data. Czy ktoś wie, jak sprawić, by działało to w obie strony? Oto mój link code dla kodu pióra jest poniżej ilustruje 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

Answer 1

musisz $emit zmian od jego reakcję.

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

Answer 2

Problem polega na tym, że używasz przeciwko model ze składnikiem niestandardowej. Podczas korzystania z komponentu v-model="message" jest po prostu cukier syntaktyczny dla

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

więc używać v-model z niestandardowego komponentu, komponent musi mieć value rekwizyt i emitują zdarzenia wejściowego o wartości zmieniło.

odejdę dalszych wyjaśnień do documentation