Dynamically adding swipeout with @click handle

1

I am not yet, making use of the Template7 , so i am adding swipeout items dynamically using vanilla javascript this way:

1st the lambda function will read through a list with houses (At homes.html page):

  $(document).on('page:afterin',  '.page[data-name="homes"]', function (e) {
    houses.map(house => {
      insertElement(house.address, house.name, house.home_type);
    })
  });

The function insertElement will insert a swipeout for each:

function createElement(elem, attr_key, attr_val){
    var ret = document.createElement(elem);
    ret.setAttribute(attr_key,attr_val);
    return ret;
}

function insertElement(address, name, type){
  var docBody     = document.getElementsByClassName('list media-list')[0];
  var docBodyss   = docBody.getElementsByTagName("ul")[0];
  var liswipeout  = document.createElement('li');
  liswipeout.setAttribute('class','swipeout');
  .....

Next we have the custom local method defined:

  return {
    methods: {
      editHome: function () {
        window.alert('works');
      }
    }
  }

I know i can’t dynamically insert @click handle, and i’d like to use the locally defined method in methods, so i don’t want to use app.methods.editHome globally defined.

What are my options? How could i use setState for dinamically inserted elements? I can’t setState if they don’t exist yet , right?

Thank you very much for your support, i hope i learn how to better use your framework.

2

Ok guys,

I think if someone happens to have the same problem the only solution i see is to use onClick=“app.methods.function()” with a global method.

i went for Template7 and boy is it faster do write code with it…

Thank you again