javascript - VueJS组件数据未更新

我几个小时以来一直在遇到VueJS的问题，需要帮助。

我有一个带有HTML字符串的变量。我想通过JS操作此字符串。这样就可以在某个单元格中绘制徽章。
但是任何更改都不会被接管。我不知道为什么。

<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>

控制台输出正确的字符串。但是，该组件不会显示它。即使使用Vue DevTools，我也看不到字符串已更改。

最佳答案

使用Vue.set(object, propertyName, value)

这将帮助您。

关于javascript - VueJS组件数据未更新，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58813383/