Question

我试图在Vue.js组件中动态呈现一些HTML。我成功地渲染了HTML。但是，我不知道如何为动态呈现的元素连接事件。我创造了一个小例子。这个例子可能看起来像我对复杂事物的看法。但是，它只是真实例子的一小部分。这个例子可以在这个JSFiddle中看到，代码如下所示：

new Vue({
  el: '#app',
  data: {
    items: [
      { 
        name:'Item 1', 
        isHtml:true, 
        mold: function() {
          return '<button @click="onButtonOneClick">click</button>';
        }
      },

      {
        name: 'Item 2',
        isHtml: false
      },

      {
        name:'Item 3',
        isHtml: true,
        mold: function() {
          return '<button @click="onButtonThreeClick">click</button>';
        }
      }
    ]
  },

  methods: {
    getHtml: function(i) {
      return i.mold();
    },

    onButtonOneClick: function() {
      alert('First Item Clicked');
    },

    onButtonThreeClick: function() {
      alert('Third Item Clicked')
    }
  }
})

如果你操这个小提琴，你会注意到我的两个按钮在屏幕上看起来很好。但是，当您实际单击按钮时，相关的点击事件不会被触发。从我所看到的，看起来HTML没有完全编译。我可能错了。但是，根据我在Chrome开发工具中看到的内容，它看起来是什么样的。

如何在Vue.js组件中为动态生成的HTML连接事件？

Answer 1

我很抱歉这是一个令人讨厌的事，但为什么你的data :中有vue标记？这永远不会奏效。你能解释是什么导致你走这条路吗？为什么您的标记不能保留在template :？

Vue确实有一个v-html指令，可以将javascript中的一小部分标记弹出到模板中，但是这个标记中的Vue标签不会被处理，而且这是你应该在良心上使用的那些功能之一。

Vue之外的事件监听器，在Vue渲染后附加，可以正常运行，但是你真的必须在镜子里看看自己，然后问“哦，我做了什么”？< / p>

Answer 2

你的例子违背了Vue试图完成的所有事情。我建议在他们的文档中阅读Vue或者阅读一些教程。我并不是说它无法完成，因为你当然可以在以后绑定事件，但这并不明智。

当然这样的事情无法发挥作用：

mold: function() {
  return '<button @click="onButtonThreeClick">click</button>';
}

这是因为Vue在注入时已经呈现了标记。

很难说出你想要达到的目的，但也许这样的事情可以帮助你：

https://jsfiddle.net/ozf8kq1z/2/

（打开你的控制台）

Answer 3

你正试图渲染'功能性html'，这基本上是Vue为你做的事情的本质。只需像你一样渲染你的列表，然后在'is_button'这样的属性中添加你的数据，并输出v-for中的按钮的html并添加它的事件。 e.g。

   <div v-for="(item, index) in items">
    <button v-if="item.is_button" @click="onButtonClick(index)">
    <div>item.content</div>
   </div>

祝你好运

在Vue.js组件中向动态呈现的HTML添加事件

3 个答案: