通過渲染功能實現v模型不反應

我正在嘗試創建動態輸入組件，該組件可以在輸入和textarea標記之間互換。我試圖通過使用渲染功能來實現這一點。（https://vuejs.org/v2/guide/render-function.html#v-model）。通過渲染功能實現v模型不反應

我現在的問題是，v模型只能工作一種方式，如果我直接更改數據屬性，它會更新textarea值，但如果我更改或輸入新數據到textarea它不會更新數據屬性。有誰知道如何使它同時工作？這裏是我的代碼鏈接代碼筆波紋管就足以說明問題：

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

來源

2017-03-08 Andrius Solopovas

你需要從你的輸入$emit變化。

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

來源

2017-03-08 16:52:38 Bert

看起來像碼頭需要更正嗎？謝謝 –

@AndriusSolopovas我同意，文檔似乎掩蓋了這一點。 – Bert

的問題是，你正在使用的V模型的定製組件。當組件v-model="message"使用僅僅是

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

所以使用V模型與自定義組件的語法糖，你的組件必須具有value道具與改變的值發出輸入事件。

我會留下進一步解釋到documentation

來源

2017-03-08 16:36:46

我知道如何通過從一個值的自定義組件發光輸入來實現V型的自定義組件，問題是它修建垃圾我VUE-devtools一個巨大的發光量，我想我可以靜靜地實現它以務實的方式。因此，它有點像本地V模型一樣工作，說實話如果渲染功能實現v-for和其他屬性，應該有一種實現完整V模型的方式。 –

通過渲染功能實現v模型不反應

回答

相關問題