Vue v-html 中动态生成内容的事件绑定：一种全局方法调用方案

<script>
import { defineComponent, onMounted, ref, reactive } from 'vue';

export default defineComponent({
  data() {
    const todoInput = ref(''); // 用于输入新待办事项
    const list = reactive([
      { todo: '学习 Vue 3', checked: false },
      { todo: '完成教程文章', checked: false },
      { todo: '规划下一个项目', checked: false },
    ]);
    return { todoInput, list };
  },
  methods: {
    /**
     * 从列表中移除指定索引的待办事项
     * @param {number} index - 待办事项在列表中的索引
     */
    removeTask(index) {
      if (index >= 0 && index < this.list.length) {
        this.list.splice(index, 1);
        console.log(`Task at index ${index} removed. Current list length: ${this.list.length}`);
      }
    },
    /**
     * 生成待办事项列表的HTML字符串
     * 该字符串将被 v-html 渲染
     * @returns {string} 待办事项列表的HTML字符串
     */
    renderTasks() {
      if (this.list.length === 0) {
        return ''; // 如果列表为空，返回空字符串
      }
      return this.list
        .map((item, index) => {
          // 注意：此处使用原生的 onclick 调用全局 window.removeTask 方法
          return `<div class="task">
                    <p>${item.todo}</p>
                    <button onclick="removeTask(${index})">删除</button>
                  </div>`;
        })
        .join('');
    },
    /**
     * 添加新的待办事项
     */
    addTask() {
      if (this.todoInput.trim() !== '') {
        this.list.push({ todo: this.todoInput.trim(), checked: false });
        this.todoInput = ''; // 清空输入框
      }
    }
  },
  mounted() {
    // 在组件挂载后，将 removeTask 方法挂载到 window 对象上
    // 这样它就可以从 v-html 渲染的字符串中通过 onclick 调用
    window.removeTask = this.removeTask;
    console.log('removeTask method exposed to window object.');
  },
  beforeUnmount() {
    // 在组件卸载前，清理全局变量，避免污染
    if (window.removeTask === this.removeTask) {
      delete window.removeTask;
      console.log('removeTask method removed from window object.');
    }
  }
});
</script>

<template>
  <div class="todo-app">
    <h1>我的待办事项</h1>
    <div class="input-area">
      <input type="text" v-model="todoInput" placeholder="添加新的待办事项..." @keyup.enter="addTask">
      <button @click="addTask">添加</button>
    </div>

    <div class="list-container">
      <div v-if="list.length" class="task-container" v-html="renderTasks()"></div>
      <div v-else class="task-container empty-message">目前没有待办事项。</div>
    </div>
  </div>
</template>