如何在Vue中为添加了“ v-html”的内容设置“ v-on”

Question

在Vue中是否可以在添加的v-on字符串上添加事件v-html？在该示例中，当单击“ Maggie”链接时，没有任何反应。它似乎没有在Vue中注册。

也许还有另一种方法？我正在使用Vue.js 2.1.3

Java脚本

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', '<a href="#" v-on:click="click_user">Maggie</a>']
        },
        methods: {
            click_user: function() {
                console.log('Click user')
            },
        }
    })
}

的HTML

<div id="app">
    <div v-for="user in users" v-html="user"></div><br>
    <a href="#" v-on:click="click_user">This works.</a>
</div>

Answer 1

您应该尝试创建一个组件并将用户变量作为 prop 传递。以下是您可以执行的操作的示例。

<users-list v-for="user in users" v-bind:user="user"></users-list>

这是一个快速功能示例：https ://jsfiddle.net/leocoder/tor13m26/1/

为此目的使用 v-html 似乎是一个不好的做法。