VueJS子組件綁定輸入狀態與雙結合

Question

父我有一個像這樣的文字輸入幾個子組件：

Vue.component('child', { 
    template: `<div style="border:1px solid black; margin:10px" contenteditable="true"/>` 
}) 

Vue.component('parent', { 
    template: `<div><child v-for="(i,idx) in datalist" :key="idx" v-bind /></div>`, 
    data:function(){ 
     return {datalist:[1,2,3,4,"sfsd"]}; 
    } 
}) 

現在我想在datalist每個數據點的結合到內容編輯的div 。這些是要求：

• 當我在div中編輯值，父母的模型立即改變。
• 允許父母隨時「覆蓋」子組件輸入中的值，也可以在我輸入時輸入。
• 由於文本輸入是可以滿足的，因此我無法使用v-模型。

我試圖回調綁定上KEYUP和家長使用Vue.set()，並在div的{}，但我會碰到與光標移動到剛開始的時候我開始編輯的問題。 Vue正在爲div設置一個新值，因爲我從我剛鍵入的東西中鍵入...

我已經多次看到此問題，是否有一個通用名稱，以及解決此問題的最佳方法是什麼？

Answer 1

您可能需要在contenteditable元素上添加@input，並將事件發送回父組件以獲取更改。我發現這個codepen似乎接近你要找什麼期望初始DataList控件綁定：

https://codepen.io/anon/pen/QaPXoq

Vue.component('editable',{ 
 
    template:'<div contenteditable="true" @input="update"></div>', 
 
    props:['content'], 
 
    mounted:function(){ 
 
    this.$el.innerText = this.content; 
 
    }, 
 
    methods:{ 
 
    update:function(event){ 
 
     this.$emit('update',event.target.innerText); 
 
    } 
 
    } 
 
}) 
 

 
var example = new Vue({ 
 
    el: '#example', 
 
    data: { 
 
    text:"This text is editable!" 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> 
 
<div id="example"> 
 
    <editable :content="text" @update="text = $event"></editable> 
 
    <div> 
 
    <pre>{{$data |json }}</pre> 
 
    </div> 
 
</div>