innerHTML output value is duplicated using vuejs

Question

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

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

}

how are you consuming this component? I see two slot's but i'm not sure how you're using them. can you reproduce this issue in jsfiddle or codepen? — geoctrl
– geoctrl, Commented Aug 7, 2018 at 23:31

Adrian W · Accepted Answer · 2019-05-06 12:43:54Z

1

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.

edited May 6, 2019 at 12:43

Adrian W

5,11411 gold badges42 silver badges54 bronze badges

answered May 6, 2019 at 12:20

Omer Tal

3712 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Varsh Over a year ago

can you please help, how to get innerHTML of some div by id in editorPost ?

Collectives™ on Stack Overflow

innerHTML output value is duplicated using vuejs

Editor result:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Editor result:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related