2017-03-08 20 views
5

Giriş ve textarea etiketi arasında birbiriyle değiştirilebilir olan dinamik giriş bileşeni oluşturmaya çalışıyorum. Bunu render fonksiyonunu kullanarak yapmaya çalışıyorum. (https://vuejs.org/v2/guide/render-function.html#v-model).v-model uygulaması ile render işlevi reaktif değil

Sahip olduğum sorun, v-modelinin yalnızca tek bir şekilde çalıştığından, veri özelliğini doğrudan değiştirdiğimde textarea değerini güncelleştirir, ancak yeni verileri textarea olarak değiştirir veya girersem, veri özelliğini güncelleştirmez. Bunu iki şekilde nasıl çalıştıracağını bilen var mı? İşte kod kalem benim kod bağlantı sorunu göstermektedir feryat olduğunu:

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

cevap

3

daha da açıklamalar bırakacaktır.

on: { 
    input: event => { 
     this.value = event.target.value 
     this.$emit('input', event.target.value) 
    } 
} 
Ben değerine sahip bir özel bileşeninden girdi yayarak özel bileşenler için v-modeli uygulamak bilen
+0

Vue'de rıhtım düzeltmeye ihtiyaç duyuyor mu? Teşekkürler –

+0

@AndriusSolopovas Katılıyorum, belgelerin bu nokta üzerinde parlak görünüyor. – Bert

1

sorun özel bir bileşeni ile V-model kullanılarak olmasıdır. bileşeni v-model="message" ile kullanarak Yani özel bileşenle v modeli kullanmak için

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

için sadece sözdizimsel şeker, Bileşeniniz value pervane var ve değiştirilen değerle girdi olayını yayarlar gerekir.

Ben Sen girişten $emit değişikliklere ihtiyaç documentation

+0

, sorun yayar büyük miktarda benim vue-devtools ben sessizce uygulamak düşündüm spams olduğunu pragmatik bir şekilde. Bu nedenle, yerel v-model gibi bir tür çalışmanın ve v-for işlevinin işlenmesinin ve özniteliklerin geri kalanının işlenmesinin tam bir v-modelinin uygulanmasının bir yolu olması gerektiğinde dürüst olması. –

İlgili konular