我有一个基本的模板,通过以下两种数据绑定方式从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>
在这个级别上,一切正常
现在,我将变量更改为数组(object),使用v-for(同时编辑多个元素,并在数组中输出它们,如下所示):
<template>
<div v-for="item in items">
<quill-editor
v-model="item.text"
:options="editorOptionProTemplate"
>
</quill-editor>
<div v-html="textComputedArray"></div>
</div>
</template>
<script>
data () {
return {
items: [
{active: true, text: 'text1', textOutput: ''},
{active: true, text: 'text2', textOutput: ''},
{active: true, text: 'text3', textOutput: ''},
{active: true, text: 'text4', textOutput: ''},
{active: true, text: 'text5', textOutput: ''}
]
}
},
textComputedArray: {
var output=''
for (var i=0; i<this.items.length; i++) {
if (this.items[i].active) {
this.items[i].textOutput= this.items[i].text + '<br />'
output = output + this.items[i].textOutput
}
else {
this.items[i].textOutput= ''
}
}
return output
},
</script>
我应该如何修改代码以将debounceText computed应用于此输出?我认为我不能将computed添加到模板中,也不能将任何参数传递到computed属性中.
也许比我更有经验的人会给我一些解决方案/建议?