Vue js bind event to dynamic child element

Question

In jQuery I can bind event to dynamically created child element:

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

For example, I have table and want to append new row, when user places focus in the last row input:

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

How can I achieve this with Vue?

Hardik Satasiya · Accepted Answer · 2016-12-26 06:41:20Z

2

your new html is required to be compiled bu vue to behave like part of 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.')
    }
  }
});

answered Dec 26, 2016 at 6:41

Hardik Satasiya

9,7253 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue js bind event to dynamic child element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related