透過innerHTML vue不起作用

XiaoNiuFeiTian發表於2024-04-17
HTMLVue

innerHTML 在 Vue 中直接使用可能不會如預期工作，因為 Vue 是資料驅動的，它期望你透過運算元據來更新檢視，而不是直接操作 DOM。當你使用 v-html 指令時，Vue 會將內容作為 HTML 解析，但如果你直接修改 DOM 的 innerHTML，Vue 就無法追蹤變動了。

解決方法：

  1. 使用 Vue 的資料繫結功能，而不是直接操作 innerHTML。將要顯示的內容作為資料繫結到模板中，然後透過修改這些資料來更新檢視。

<template>
  <div v-html="htmlContent"></div>
</template>
 
<script>
export default {
  data() {
    return {
      htmlContent: '<span>初始內容</span>'
    };
  },
  methods: {
    updateContent() {
      this.htmlContent = '<span>更新後的內容</span>';
    }
  }
};
</script>

  1. 如果你需要動態地插入 HTML 並保持 Vue 的響應性，可以使用 Vue 提供的 v-html 指令。

<template>
  <div v-html="dynamicHTML"></div>
</template>
 
<script>
export default {
  data() {
    return {
      dynamicHTML: '<span>初始內容</span>'
    };
  },
  methods: {
    updateHTML() {
      this.dynamicHTML = '<span>更新後的內容</span>';
    }
  }
};
</script>

  1. 如果你需要操作 DOM 並且確保 Vue 能夠追蹤變化，可以使用 Vue 提供的 Vue.set 方法或者 vm.$set 例項方法來確保新新增的屬性是響應式的。

// 假設 vm 是 Vue 例項
vm.$set(vm.someObject, 'b', 'new value');

總結：在 Vue 中，儘可能避免直接操作 DOM，而是透過操作 Vue 例項上的資料來更新檢視。這樣做可以確保檢視和資料之間的繫結始終保持同步。

參考：百度AI

參考2：https://cloud.tencent.com/developer/information/%E4%BD%BF%E7%94%A8innerHTML%E6%97%B6vue%20html%E4%B8%8D%E5%91%88%E7%8E%B0-video

參考3：https://www.cnblogs.com/hhyf/p/11409386.html

參考4：https://blog.csdn.net/qq_40792800/article/details/122427044（Vue.Set）

https://wenku.baidu.com/view/874e61a9463610661ed9ad51f01dc281e53a56a2.html?_wkts_=1713345575931&bdQuery=Vue.set+innerHTML

相關文章