javascript - 使用 vuejs 复制 insideHTML 输出值

Question

我目前正在学习 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);
});

}

Answer 1

为此目的使用 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。