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>