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 = Please enter your name to continue

当我将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

为此目的使用引用是一个不好的做法。您应该使用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。

使用vuejs复制innerHTML输出值

编辑器结果：

1 个答案: