Vue 模型未更新 [英] Vue model not updating
问题描述
当我尝试更新自定义文本区域组件的模型数据时 this.message='<span id="foo">bar</span> 文本和 html 不显示在 htmltextarea 标签中应该如此，但我可以看到在 Vue 开发工具的控制台中应用的更新.我还尝试切换到对象而不是字符串并使用 Vue.设置，但这也不起作用.
有关如何解决此问题的任何建议?
htmlTextArea 组件的目标是从 htmlTextArea 标签中获取用户文本(这是有效的)，操作此文本并将其绑定回 textarea，但其中包含 HTML.
自定义文本区域组件:
<div contenteditable="true" @input="updateHTML" class="textareaRoot"></div></模板><脚本>导出默认{//自定义文本区域name: 'htmlTextArea',道具:['价值']，挂载:函数(){this.$el.innerHTML = this.value;},方法: {更新HTML:功能(e){this.$emit('input', e.target.innerHTML);}}}其他组件:
...<htmlTextArea id="textarea" v-model="message"></htmlTextArea>...</模板><脚本>数据: {返回 {消息:'东西'//这有效}}...方法: {更改文本(){this.message='<span id="foo">bar</span>'//这个没有}},成分: {html文本区域}value props 改变后需要显式设置值.你可以观察value变化.
<div contenteditable="true" @input="updateHTML" class="textareaRoot"></div></模板><脚本>导出默认{//自定义文本区域name: "htmlTextArea",道具:[价值"]，安装:功能(){this.$el.innerHTML = this.value;},手表: {价值(v){this.$el.innerHTML = v;}},方法: {更新HTML:功能(e){this.$emit("input", e.target.innerHTML);}}};When I try to update my custom text-area component's model data this.message='<span id="foo">bar</span> the text and html does not display in the htmltextarea tag like it should, but I can see the update applied in the Vue dev tool's console. I've also tried switching to an object instead of a string and using Vue.set, but this does not work either.
Any suggestions on how to fix this?
The goal with the htmlTextArea component is to get the users text from the htmlTextArea tag (this works), manipulate this text and bind it back to the textarea, but with HTML in it.
Custom text-area component:
<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>
Other component:
<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>
You need to set the value explicitly after the value props change. you can 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>
这篇关于Vue 模型未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
