innerHTML 在 Vue 中直接使用可能不会如预期工作，因为 Vue 是数据驱动的，它期望你通过操作数据来更新视图，而不是直接操作 DOM。当你使用 v-html 指令时，Vue 会将内容作为 HTML 解析，但如果你直接修改 DOM 的 innerHTML，Vue 就无法追踪变动了。
解决方法：
-
使用 Vue 的数据绑定功能，而不是直接操作
innerHTML。将要显示的内容作为数据绑定到模板中，然后通过修改这些数据来更新视图。
<template>
<div v-html="htmlContent"></div>
</template>
<script>
export default {
data() {
return {
htmlContent: '<span>初始内容</span>'
};
},
methods: {
updateContent() {
this.htmlContent = '<span>更新后的内容</span>';
}
}
};
</script>
-
如果你需要动态地插入 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>
-
如果你需要操作 DOM 并且确保 Vue 能够追踪变化，可以使用 Vue 提供的
Vue.set方法或者vm.$set实例方法来确保新添加的属性是响应式的。
// 假设 vm 是 Vue 实例 vm.$set(vm.someObject, 'b', 'new value');
总结：在 Vue 中，尽可能避免直接操作 DOM，而是通过操作 Vue 实例上的数据来更新视图。这样做可以确保视图和数据之间的绑定始终保持同步。
参考：百度AI
参考3：https://www.cnblogs.com/hhyf/p/11409386.html
参考4：https://blog.csdn.net/qq_40792800/article/details/122427044（Vue.Set）
标签：vue,set,DOM,不起作用,视图,Vue,innerHTML,https From： https://www.cnblogs.com/2008nmj/p/18141278