我目前正在学习 vue,在渲染 HTML 文本时遇到了问题。 这是我的组件模板,所见即所得。
<template>
<div id='editor_container'>
<slot name="header" />
<div id='editor' ref='editorPost'></div>
<slot name="footer" />
</div>
</template>
从 './helpers/docFormats' 导入 { tempDOC }
我创建了简单的函数来发送数据进行测试。
templateEdit () {
const editor = this.$refs.editorPost.innerHTML = tempDOC
}
在我的 tempDOC.js 文件中,我导出字符串:
export const tempDOC = 请输入您的姓名以继续
当我将 tempDOC 中的 innerHTML 内容渲染到 $refs.editorPost(editor WYSIWYG) 中时,该值会重复。
编辑结果:
请输入您的姓名以继续
<小时/>请输入您的姓名以继续
<小时/>下面是检查 HTML。
<div id="editor" spellcheck="false" contenteditable="true">
<p>Please enter your name to continue</p>
Please enter your name to continue
</div>
不确定为什么这些值会重复,我使用 chrome 调试应用程序,我看到这是在我的函数之后调用的。我这边没有那段代码。
this._observer = new MutationObserver(function (mutations) {
_this._handleMutations(mutations);
});
}
最佳答案
为此目的使用 ref 是一种不好的做法。您应该使用 Vue 的 Data
函数来创建一个变量,并通过 vue this
更改它/达到它的值。
<template>
<div id='editor_container'>
<slot name="header" />
<div id='editor'>{{editorPost}}</div>
<slot name="footer" />
</div>
</template>
<script>
export default {
data() {
return {
editorPost: "this is the inner HTML",
}
},
}
</script>
现在更改 editorPost
来更改 innerHTML
。
关于javascript - 使用 vuejs 复制 insideHTML 输出值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51736066/