我有基本模板,通过双向数据绑定从wysiwyg编辑器输出文本,如下所示:
<template>
<div>
<quill-editor
v-model="debounceText"
:options="editorOptionProTemplate"
>
</quill-editor>
<div v-html="textComputed"></div>
</div>
</template>
<script>
data () {
return {
text: ''
}
},
computed: {
debounceText: {
get() { return this.text; },
set: _.debounce(function(newValue) {
this.text = newValue;
}, 100)
},
//using computed for many variants for styling output in web (here just adding <b> tag)
textComputed() {
return '<b>' + this.text + '</b>'
}
}
</script>
Run Code Online (Sandbox Code Playgroud)
在这个级别一切正常
现在,我将变量转换为数组(对象),使用v-for(许多元素同时编辑并在数组中输出它们如下):
<template>
<div v-for="item in items">
<quill-editor
v-model="item.text"
:options="editorOptionProTemplate"
>
</quill-editor>
<div v-html="textComputedArray"></div> …Run Code Online (Sandbox Code Playgroud)