当我尝试更新自定义文本区域组件的模型数据时this.message='<span id="foo">bar</span>
文本和 html 没有像应有的那样显示在 htmltextarea 标记中,但我可以在 Vue 开发工具的控制台中看到应用的更新。我还尝试切换到对象而不是字符串并使用Vue.set https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats,但这也不起作用。
对于如何解决这个问题,有任何的建议吗?
目标与htmlTextArea
组件的作用是从 htmlTextArea 标记中获取用户文本(这有效),操作该文本并将其绑定回文本区域,但其中包含 HTML。
自定义文本区域组件:
<template>
<div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
// Custom textarea
name: 'htmlTextArea',
props:['value'],
mounted: function () {
this.$el.innerHTML = this.value;
},
methods: {
updateHTML: function(e) {
this.$emit('input', e.target.innerHTML);
}
}
}
</script>
其他组件:
<template>
...
<htmlTextArea id="textarea" v-model="message"></htmlTextArea>
...
</template>
<script>
data: {
return {
message: 'something'//this works
}
}
...
methods: {
changeText() {
this.message='<span id="foo">bar</span>'//this does not
}
},
components: {
htmlTextArea
}
</script>
您需要在之后显式设置该值value
道具改变。你可以watch https://v2.vuejs.org/v2/api/#watch for value
change.
<template>
<div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
// Custom textarea
name: "htmlTextArea",
props: ["value"],
mounted: function() {
this.$el.innerHTML = this.value;
},
watch: {
value(v) {
this.$el.innerHTML = v;
}
},
methods: {
updateHTML: function(e) {
this.$emit("input", e.target.innerHTML);
}
}
};
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)