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

Question

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

或者也许有另一种方法可以做到这一点？ 我正在使用 Vue.js 2.1.3

Javascript

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

来自 vue文档：

更新元素的 innerHTML。 请注意，内容是作为纯 HTML 插入的——它们不会被编译为 Vue 模板。 如果您发现自己尝试使用 v-html 编写模板，请尝试改用组件来重新考虑解决方案。

这意味着v-on不能在v-html中工作，因为它需要 vue 才能工作。

---

您特定问题的潜在解决方案

使用v-if有条件地呈现链接，否则呈现纯文本。

 new Vue({ el: '#app', data: { users: [ { name: 'Homer', clickable: false }, { name: 'Marge', clickable: false }, { name: 'Bart', clickable: false }, { name: 'Lisa', clickable: false }, { name: 'Maggie', clickable: true }, ] }, methods: { click_user: function() { console.log('Click user') }, } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.js"></script> <div id="app"> <div v-for="user in users"> <div v-if="!user.clickable">{{user.name}}</div> <a v-if="user.clickable" href="#" v-on:click="click_user">{{user.name}}</a> </div> </div>

Answer 2

使用v-html渲染<a href="#" v-on:click="click_user">Maggie</a>不会绑定任何点击事件。 您可以在doc中阅读有关它的更多信息。 它只会渲染v-on:click作为属性。

保留简单的数据数组。 我认为您不需要v-html 。 使用带有if （一个或两个）或switch （多个）条件的text或index来触发事件。

window.onload = function() {
    new Vue({
        el: '#app',
        data: {
            users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
        },
        methods: {
            click_user: function(text) {
              if(text=='Maggie') console.log('Click user')
            }
        }
    })
}

<div id="app">
   <div v-for="user in users" v-on:click="click_user(user)">{{user.name}}</div><br>    
</div>

或者

window.onload = function() {
  new Vue({
      el: '#app',
      data: {
          users: ['Homer', 'Marge', 'Bart', 'Lisa', 'Maggie']
      },
      methods: {
        click_user: function(index) {
          if(index==4) console.log('Click user')
        }
      }
   })
}

<div id="app">
   <div v-for="user,index in users" v-on:click="click_user(index)">{{user.name}}</div><br>    
 </div>

Answer 3

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

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

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

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