Vue3根据数组项动态渲染HTML及相关问题求助

第一个问题：解决Uncaught TypeError: app.addMessage is not a function错误 #

你这里踩了个Vue入门常见的小坑：Vue.createApp()返回的是应用实例，而你定义的addMessage方法是属于根组件实例的，不是应用实例的属性。正确的做法是把mount()的返回值存下来，这个返回值才是真正能调用组件方法的根组件实例：

修改你的JS代码：

document.addEventListener('DOMContentLoaded', () => {

    const app = Vue.createApp({
        // 你的data、methods、template代码保持不变
    });

    // 把mount的结果存为变量，这才是拥有组件方法的实例
    const vm = app.mount('#app');

    for (let i = 0; i < 10; i++) {
        // 用组件实例vm调用addMessage方法
        vm.addMessage({
            role: 'user',
            text: 'message #' + i
        });
    }
});

顺便帮你修正一个模板里的小问题：你用{{ }}插值的HTML标签会被当成纯文本输出，不会渲染成实际的图标。比如{{ message.role === 'user' ? '<i...>' : '<i...>' }}会直接显示成字符串，应该换成Vue的条件渲染指令v-if/v-else来实现：

<div class="p-2">
    <i v-if="message.role === 'user'" class="fa-solid fa-user fa-2xl text-primary"></i>
    <i v-else class="fa fa-robot fa-2xl text-primary"></i>
</div>

第二个问题：给动态生成的按钮添加事件监听 #

在Vue里完全没必要手动操作DOM绑定事件，框架的响应式系统已经帮我们处理了动态元素的事件绑定逻辑。直接用Vue的@click（v-on:click的简写）指令就能搞定：

1. 先在组件的methods里添加点击处理方法：

methods: {
    addMessage(message) {
        this.messages.push(message);
    },
    handleCopy() {
        console.log("Hello");
        // 这里可以扩展复制逻辑，比如复制当前消息文本
    }
}

2. 然后修改模板里的按钮，绑定点击事件：

<div class="p-2 flex-grow-1">
    {{ message.text }} 
    <button type="button" class="copy-button" @click="handleCopy">Copy</button>
</div>

如果需要在点击时获取当前对应的message数据，还可以把参数传进去：

<button type="button" class="copy-button" @click="handleCopy(message)">Copy</button>

对应的方法改成：

handleCopy(message) {
    console.log("Hello", message.text);
    // 示例：复制消息文本到剪贴板
    navigator.clipboard.writeText(message.text);
}

这样不管按钮是静态还是动态生成的，Vue都会自动帮你绑定好事件，完全不需要手动操作DOM，这也是Vue这类前端框架的核心优势之一~

备注：内容来源于stack exchange，提问作者Jay