Vue js将事件绑定到动态子元素

【问题标题】：Vue js bind event to dynamic child elementVue js将事件绑定到动态子元素
【发布时间】：2016-11-08 15:10:02
【问题描述】：

在 jQuery 中，我可以将事件绑定到动态创建的子元素：

$(staticAncestors).on(eventName, dynamicChild, function() {});

例如，当用户将焦点放在最后一行输入时，我有一个表格并想追加新行：

$("#meta-panel").on("focus", ".input-row:last input", function (event)   {
    myVueApp.addMetaInputRow(); //pushes new row into array
});

如何使用 Vue 实现这一点？

【问题讨论】：

标签： javascript jquery vue.js

【解决方案1】：

您的新 html 需要在 vue 中进行编译才能像 vue instace 的一部分一样。

myVueApp = new Vue({
  methods: {
    addMetaInputRow: function(){
      // here you can add method which can focus on last row       
      var $element = $('#app').append('<div onClick="dynamic()">HTML code.</div>')
      this.$compile($element.get(0));
    },
    dynamic() {
      // add new elements to rows
      console.log('hello from dynamic content.')
    }
  }
});

【讨论】：