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.') 
    } 
    } 
});