CODEWITHSUNDEEP
javascripthtmlvue.js
bernlt
bernlt

Reputation: 445

innerHTML output value is duplicated using vuejs

I´m currently learning vue, and came accross issue when I rander an HTML text. This is my component template, its an WYSIWYG.

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

import { tempDOC } from './helpers/docFormats'

I created simple function to send data for testing.

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

On my tempDOC.js file I export string:

export const tempDOC = Please enter your name to continue

When I render innerHTML content from tempDOC into the $refs.editorPost(editor WYSIWYG), the value is getting duplicated.

Editor result:

Please enter your name to continue

Please enter your name to continue

Bellow is the inspect HTML.

<div id="editor" spellcheck="false" contenteditable="true">
<p>Please enter   your name to continue</p>

Please enter your name to continue
</div>

Not sure whey the values are getting duplicated,I debug app using chrome and I see this is being called after my function. I don´t have that piece code on my side.

    this._observer = new MutationObserver(function (mutations) {
  _this._handleMutations(mutations);
});

}

Upvotes: 0

Views: 301

Answers (1)

Omer Tal
Omer Tal

Reputation: 371

It is a bad practice to use refs for this purpose. You should use the Data function of Vue to make a variable and change it / reach it's value through the 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>

Now change the editorPost to change the innerHTML.

Upvotes: 1

Related Questions