Vue 2：如何在动态渲染的HTML中实现响应式输入？

嘿，作为Vue新手能折腾这么实用的功能，已经很棒啦！针对你遇到的动态渲染带响应式输入框的问题，我整理了几个靠谱的方案，帮你搞定：

为什么之前的v-html方案失效？ #

先给你理清楚原因：Vue的v-html只会把内容渲染成静态HTML，不会解析其中的Vue指令（比如v-model）。所以你直接把带v-model的HTML片段塞进去，Vue根本识别不了，自然就失效啦。

方案1：预处理HTML + 编译为渲染函数（Vue2适用） #

这个方案能让Vue真正解析你的HTML里的指令，实现完整的响应式绑定，步骤如下：

1. 先把XML解析出来的HTML文本里的输入框，替换成带v-model绑定的版本
2. 用Vue自带的Vue.compile把处理后的HTML编译成渲染函数
3. 在组件中使用这个渲染函数

举个代码例子：

// 假设你从XML解析得到的原始HTML
const rawHtml = `Complete the data in the table below. <table> <tr> <th>row 1, col 1</th> <th>row 1, col 2</th> </tr> <tr> <td>row 2, col 1</td> <td> <input id="input0"/> </td> </tr> </table>`;

// 第一步：替换input标签，给它们加上v-model绑定到answers对象
const processedHtml = rawHtml.replace(/<input id="(input\d+)"/g, '<input v-model="answers.$1"');

// 第二步：编译HTML为Vue能识别的渲染函数
const { render } = Vue.compile(processedHtml);

// 组件代码
export default {
  data() {
    return {
      answers: {} // 用来存储所有输入框的答案
    };
  },
  // 第三步：使用编译好的渲染函数
  render() {
    return render.call(this, this.$createElement);
  }
};

这样处理后，输入框就会和answers对象双向绑定，用户输入的内容会自动同步到数据里，完全符合Vue的响应式逻辑。

方案2：Vue3专属的编译方案 #

如果你用的是Vue3，编译方式略有不同，需要借助@vue/runtime-dom提供的编译工具：

1. 先安装依赖（如果没装的话）：

npm install @vue/runtime-dom

2. 然后写组件代码：

import { compile } from '@vue/runtime-dom';
import { ref } from 'vue';

export default {
  setup() {
    const answers = ref({});
    const rawHtml = `Complete the data in the table below. <table> <tr> <th>row 1, col 1</th> <th>row 1, col 2</th> </tr> <tr> <td>row 2, col 1</td> <td> <input id="input0"/> </td> </tr> </table>`;
    
    // 预处理HTML，给input加上v-model绑定
    const processedHtml = rawHtml.replace(/<input id="(input\d+)"/g, '<input v-model="answers.$1"');
    
    // 编译为渲染函数
    const render = compile(processedHtml);
    
    return {
      answers,
      render
    };
  },
  render(props, { slots }) {
    return this.render(this.$.ctx);
  }
};

这个方案和Vue2的思路一致，只是编译工具的调用方式不同，同样能实现完美的响应式绑定。

方案3：事件委托+手动维护数据（简单场景适用） #

如果你觉得编译的方式有点复杂，也可以用事件委托的方式快速解决，适合输入框结构不复杂的场景：

1. 用v-html直接渲染原始HTML到容器里
2. 在容器上监听input事件，通过事件对象获取输入框的ID，同步数据
3. 初始化的时候把数据回填到输入框里

代码示例：

<template>
  <div ref="questionContainer" v-html="rawHtml" @input="handleInput"></div>
</template>

<script>
export default {
  data() {
    return {
      answers: {},
      rawHtml: `Complete the data in the table below. <table> <tr> <th>row 1, col 1</th> <th>row 1, col 2</th> </tr> <tr> <td>row 2, col 1</td> <td> <input id="input0"/> </td> </tr> </table>`
    };
  },
  mounted() {
    // 初始化：把已有的答案回填到输入框
    const inputs = this.$refs.questionContainer.querySelectorAll('input');
    inputs.forEach(input => {
      if (this.answers[input.id]) {
        input.value = this.answers[input.id];
      }
    });
  },
  methods: {
    handleInput(e) {
      const input = e.target;
      if (input.tagName === 'INPUT') {
        // 同步输入值到answers对象
        this.answers[input.id] = input.value;
      }
    }
  }
};
</script>

这个方案不用处理Vue编译的问题，缺点是双向绑定需要手动维护（比如数据更新时要手动更新输入框的值），但胜在简单易上手。

综合来看，如果你需要处理复杂的试题结构，推荐用方案1或2，能完美适配Vue的响应式系统；如果只是简单场景，方案3可以快速搞定。

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