VueJS Component Data not updating

Question

I've been experiencing a problem with VueJS for hours now and need help.

I have a variable with an HTML string. I want to manipulate this string via JS. So that a badge is drawn in a certain cell. But any change is not taken over. I have no idea why.

<template>
  ...
  <div class="html-wrapper" id="file">
     <div v-html="htmlCode"></div>
  </div>
</template>

<script>
  ...
  methods: {
    redrawBadges() {
          var vmThis = this;
          this.scripts.forEach(s => {
            if(s.target != '')
              if(document.getElementById(s.target) != null) {
                let badge = s.html;
                let idIndex = vmThis.htmlCode.indexOf('id="'+ s.target +'"');
                let tdEnd = vmThis.htmlCode.indexOf('>', idIndex);
                vmThis.htmlCode = vmThis.htmlCode.splice(tdEnd + 1, 0, badge);
                console.log(vmThis.htmlCode.slice(0));
              }
          });
    }
  },
  ...
</sciprt>

The console outputs the correct string. However, the component does not display it. Even with Vue DevTools I can't see that the string has changed.

Answer 1

Use Vue.set(object, propertyName, value)

This will help you out.