时间戳

首页 > 解决方案 > 使用 vuejs 复制 innerHTML 输出值

javascript - 使用 vuejs 复制 innerHTML 输出值

问题描述

我目前正在学习 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 文件中，我导出字符串：

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

当我将 tempDOC 中的 innerHTML 内容渲染到 $refs.editorPost(editor WYSIWYG) 中时，该值会被重复。

编辑结果：

请输入您的姓名以继续

请输入您的姓名以继续

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);
});

}

标签： javascripthtmlvue.js

解决方案

为此目的使用 refs 是一种不好的做法。您应该使用DataVue 的功能来创建一个变量并通过 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.

推荐阅读