Vue3中API动态加载HTML内Vue指令(v-model)不生效问题

核心原因 #

v-html仅会将内容作为纯HTML插入DOM，不会触发Vue的模板编译流程，因此其中的v-html、v-model等Vue指令无法被识别和生效。而直接写在页面中的标签会经过Vue编译，所以能正常绑定数据。

可行解决方案 #

1. 用Vue动态组件+模板编译实现 #

Vue3提供了compile函数可编译字符串模板，你可以把API返回的HTML当作模板字符串，编译后动态渲染为组件：

• 首先确保使用Vue的运行时编译器版本：
  • Vue CLI项目：修改vue.config.js，添加runtimeCompiler: true
  • Vite项目：在vite.config.js中配置resolve.alias.vue = 'vue/dist/vue.esm-bundler.js'
• 封装动态渲染模板的组件：

<template>
  <component :is="compiledComponent" />
</template>

<script setup>
import { compile, shallowRef, watch } from 'vue'

const props = defineProps({
  template: {
    type: String,
    required: true
  }
})

const compiledComponent = shallowRef(null)

watch(() => props.template, (newTemplate) => {
  compiledComponent.value = compile(newTemplate)
}, { immediate: true })
</script>

• 替换原v-html的使用方式：

<template>
  <DynamicTemplate :template="documents[1].html" />
</template>

这样API返回的HTML中的Vue指令会被正常编译，和直接写在页面里的效果一致。

2. 手动绑定数据（适合简单场景） #

如果动态HTML结构不复杂，可手动解析元素并绑定数据：

// 假设动态HTML插入后获取目标元素
const titleEl = document.querySelector('.heading-h2')
// 监听Pinia数据变化更新元素内容
watch(() => store.documents[1].json[527][1].title, (newVal) => {
  titleEl.textContent = newVal
})

// 若需要编辑功能，监听元素输入事件更新Pinia数据
// 示例：如果是输入框
const inputEl = document.querySelector('#dynamic-input')
inputEl.addEventListener('input', (e) => {
  store.updateJsonData(527, 1, { title: e.target.value })
})

这种方法繁琐，仅适合简单场景，复杂模板优先选第一种方案。

3. 调整无头CMS输出格式（推荐可控方案） #

让CMS返回组件配置而非完整HTML，比如JSON格式的结构：

{
  "type": "heading",
  "class": "heading-h2 has-line",
  "bindPath": "documents[1].json[527][1].title",
  "defaultText": "Nice title for you!"
}

前端根据配置渲染组件：

<template>
  <h2 :class="item.class" v-html="bindValue">{{ item.defaultText }}</h2>
</template>

<script setup>
import { computed } from 'vue'
import { useYourStore } from '@/stores'

const props = defineProps({
  item: Object
})

const store = useYourStore()
const bindValue = computed(() => {
  // 解析路径获取Pinia数据，可使用lodash.get避免eval风险
  return store[props.item.bindPath.split('.')[0]][props.item.bindPath.split('.')[1]]
})
</script>

这种方式更可控，也能避免动态模板编译的XSS风险。

注意事项 #

• 使用compile编译动态模板时，必须确保API返回的HTML来源可信，避免XSS攻击。
• 启用运行时编译器会略微增加打包体积，需权衡功能与体积的关系。

内容的提问来源于stack exchange，提问作者Dimitri Hilverda