Vue 2中如何处理计算属性渲染HTML的事件绑定问题

问题原因 #

你用v-html渲染的HTML内容里，Vue不会解析其中的v-on等指令——v-html仅负责插入纯静态HTML，不会触发Vue的编译流程，所以直接写v-on:click完全无效。

解决方案1：组件化拆分文本（推荐） #

把原文本按[input]分割，通过Vue模板循环渲染静态文本和输入框组件，这样能正常绑定Vue事件：

<template>
  <div class="content-wrapper">
    <span v-for="(segment, idx) in splitContent" :key="idx">
      {{ segment }}
      <!-- 最后一段后面不渲染输入框 -->
      <input
        v-if="idx < splitContent.length - 1"
        type="text"
        class="input_answer"
        @keyup="handleInput"
      />
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawContent: "Hello everyone! My name is [input]. I'm [input] year old"
    };
  },
  computed: {
    splitContent() {
      // 按标记分割原始文本
      return this.rawContent.split('[input]');
    }
  },
  methods: {
    handleInput(e) {
      // 这里写你的键盘事件逻辑
      console.log('输入框键盘事件触发:', e.target.value);
    }
  }
};
</script>

这种方式完全遵循Vue的响应式机制，事件绑定、数据交互都更可靠，也便于后续维护。

解决方案2：手动绑定DOM事件（特殊场景用） #

如果必须通过v-html渲染完整HTML，可在DOM渲染完成后手动给输入框绑定事件：

<template>
  <div ref="contentBox" v-html="renderedHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawContent: "Hello everyone! My name is [input]. I'm [input] year old"
    };
  },
  computed: {
    renderedHtml() {
      // 替换标记为纯HTML输入框（不带Vue指令）
      return this.rawContent.replaceAll('[input]', '<input type="text" class="input_answer"/>');
    }
  },
  mounted() {
    this.attachInputEvents();
  },
  updated() {
    // 若内容动态更新，需重新绑定事件（先移除旧事件避免重复触发）
    this.attachInputEvents();
  },
  methods: {
    attachInputEvents() {
      const inputs = this.$refs.contentBox.querySelectorAll('.input_answer');
      inputs.forEach(input => {
        input.removeEventListener('keyup', this.handleInput);
        input.addEventListener('keyup', this.handleInput);
      });
    },
    handleInput(e) {
      console.log('输入框键盘事件触发:', e.target.value);
    }
  }
};
</script>

注意：这种方式需要处理事件重复绑定的问题，且脱离了Vue的模板编译，仅适合无法拆分文本的特殊场景。

内容的提问来源于stack exchange，提问作者Nguyễn Văn Kết