@click not working inside expandable card and method not being called

1

I need to call a method from inside an expandable cards and the method it is not being called when I click on it…

The expandable cards are created inside a virtual list… here my code:

        itemTemplate:
        '<div class="card card-expandable" ref-h="{{id}}" style="position:relative;height:240px">'+
          '<div class="card-content">'+
            '<div class="main-image with-gradient" style="background: url({{image}}) no-repeat center bottom; background-size: cover; height: 240px; background-position: center;"></div>'+
            '<a href="#" class="link card-close card-opened-fade-in color-yellow" style="position: absolute; left: 15px; top: 15px">'+
              '<i class="icon f7-icons">close_round_fill</i>'+
            '</a>'+
            '<a href="#" class="card-opened-fade-in" @click="addTrip" data-type="hl" data-id="{{id}}" style="position: absolute; right: 15px; top: 15px">'+
              '<i class="icon add-to-trips i-si-25"></i>'+
            '</a>'+
            '<div class="card-content-padding">'+
              '<div class="h-content-top">...</div>'+
              '<div class="h-content-bot">...</div>'+
            '</div>'+
          '</div>'+
        '</div>',

method:

    addTrip : function (e) {
      console.log('addTripEvent');
      this.$root.addThisTrip($(e.target).closest("a").data('id'), $(e.target).closest("a").data('type'));
    },

And the method addThisTrip it is declared globally inside my app.js… this is why I used this.$root.addThisTrip…

Any ideas why the @click it is not working to call a method inside an expandable card?

thanks

2

Such event listeners syntax works only in original template in page router component. Use forum search, there were solutions on how to handle it

1 Like
3

Yes I think the problem it is that the @click to call a method of the page stops working when the it is inside the expandable card that is created by the virtual list…

This code below works if it is in original template but not inside the expandable card itemTemplate:

<a href="#" @click="addTrip" data-id="1" data-type="hl">click</a>

 addTrip : function (e) {
      console.log('addTripEvent');
      this.$root.addThisTrip($(e.target).closest("a").data('id'), $(e.target).closest("a").data('type'));
    },

I will try to find something to make this work… if you know the reason and how to fix it …

appreciated…
thanks Vladimir!

4

I just made it work like this
:slight_smile: :

itemTemplate:
        '<div class="card card-expandable" ref-h="{{id}}" style="position:relative;height:240px">'+
          '<div class="card-content">'+
            '<div class="main-image with-gradient" style="background: url({{image}}) no-repeat center bottom; background-size: cover; height: 240px; background-position: center;"></div>'+
            '<a href="#" class="link card-close card-opened-fade-in color-yellow" style="position: absolute; left: 15px; top: 15px">'+
              '<i class="icon f7-icons">close_round_fill</i>'+
            '</a>'+
            '<a href="#" class="card-opened-fade-in add-to-my-trip" data-type="hl" data-id="{{id}}" style="position: absolute; right: 15px; top: 15px">'+
              '<i class="icon add-to-trips i-si-25"></i>'+
            '</a>'+
            '<div class="card-content-padding">'+
              '<div class="h-content-top">...</div>'+
              '<div class="h-content-bot">...</div>'+
            '</div>'+
          '</div>'+
        '</div>',
```js

    pageInit: function(e, page) {
...

      $(".card-expandable").on('click', '.add-to-my-trip', function (e) {
        var id = $(this).attr('data-id');
        var type = $(this).attr('data-type');
        console.log(id +' '+type);
        app.methods.addThisTrip(id,type);
      })

Pitty @click does not work inside the itemTemplate when creating the virtual list… anyway I found the solution! :+1:

Thanks again Vladimir!