Vue公司JS绑定事件动态子元素

Question

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

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

例如，我有表，并要追加新行，当用户把焦点最后一行输入：

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

我该如何用Vue实现这个功能？

Answer 1

你的新html需要被编译为表现得像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.') 
    } 
    } 
});