innerHTML输出值是使用vuejs复制的

Question

我目前正在学习vue，在创建HTML文本时遇到了一个问题。这是我的组件模板，它是所见即所得。

<template>
<div id='editor_container'>
<slot name="header" />
<div id='editor' ref='editorPost'></div>
<slot name="footer" />
</div>
</template>

从"导入｛tempDOC｝/helpers/docFormats的

我创建了一个简单的函数来发送测试数据。

templateEdit () {
const editor = this.$refs.editorPost.innerHTML = tempDOC
}

在我的tempDOC.js文件中，我导出字符串：

导出常量tempDOC=Please enter your name to continue

当我将tempDOC中的innerHTML内容呈现到$refs.editorPost(编辑器所见即所得(中时，值会重复。

编辑器结果：

请输入您的姓名以继续

---

请输入您的姓名以继续

---

Bellow是检查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);
});

}

Answer 1

为此目的使用refs是一种不好的做法。您应该使用Vue的Data函数来创建一个变量，并通过Vuethis更改/达到其值。

<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。