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，以表现为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.')
    }
  }
});

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

1 个答案: