Passing custom data attributes to a root method, is it possible?

#1

I need to pass data attributes to a root method using @click, I try e.target to get data on click but it does not work I get undefined.

I wonder if It is possible to pass custom data attributes to a root method?

example:

any-page-sample.html
I call root method using $app.methods.helloWorld() and not problem with that but it is not possible get the data attributes! I get undefined!

<a href="#" data-id="123" @click="$app.methods.helloWorld()">$root.helloWorld()</a>

in app.js

  methods: {
    helloWorld: function (e) {
      var id = $(e.target).closest("a").data('id');
      app.dialog.alert(id);
    },
  },

for local declared methods at the current page I can get all data attributes but for the root methods is not possible! always getting UNDEFINED…

Is it possible to pass data attributes to root methods?
Appreciate any tip!
Big thanks!

#2

I’m not sure what you’re trying to do. Is it that you need to retrieve data id on root helloworld. You could change your on click like this.

let dataId = 123;
...
<a href="#" data-id="123" @click="$app.methods.helloWorld(dataId)">Check My ID</a>

app.js

methods: {
    helloWorld: function (dataId) {
     console.log('HelloWorld :: init - ', dataId);
      app.dialog.alert(dataId);
    },
},

First try to console or see is the click trigger the app root method. I’m working on ReactJs, not good with Core root.

Here how I do on my ReactApp

Home.js

<ListButton title="Method Alert" onClick={() => this.$f7.methods.alert(dataId)} />

app.js

methods: {
    alert: function (dataId) {
          console.log('alert :: ', dataId);
    }
},

Hope this help!
happy Coding!

1 Like
#3

I just need to pass several data attributes to one global method in my example I used helloWorld as example to show what I need to do but but my real method is for register favorites stores so let us say I have:

any-page-sample.html

<a href="#" data-store-id="123" data-reference="456" @click="$app.methods.registerFavs()">$root.helloWorld()</a>

in app.js

methods: {
    registerFavs: function (e) {
   var store_id = $(e.target).closest("a").data('store-id');
   var reference = $(e.target).closest("a").data('reference');
   console.log(store_id); //undefined
   console.log(reference); //undefined
    },
},

This is a global method because I do not want to repeat the code in every page to do the same thing… I just need to pass different data attributes to the method to make it work from any page when called!

I like the idea to read the data attributes from the element clicked using $(e.target) but for the global methods this seems not to be working for some reason…

any ideas?

#4

What is $root.helloWorld()?

Did you able to console just the e

    registerFavs: function (e) {
     console.log('registerFavs :: init', e);
    },
1 Like
#5

Nope the event does not come with the attributes! that is only happening with methods that are declared in app.js on the current pages they work perfectly!

Still thiking if this is possible or not… I mean passing data attributes to root methods… using event target…

$(e.target).closest("a").data('store-id');

still getting UNDEFINED!

Is there a best way for retrieve custom data attributes from event in a root method?

Any ideas will be helpful to know! thanks.

#6

Have you tried without “()”? for example @click="$app.methods.registerFavs"

2 Likes
#7

I did not think about that before asking… thank you!!

And YES for some reason using $app.methods.registerFavs without “()” finally works for the methods declared in app.js, for the rest of pages where methods are in their own pages using () or without it does not affect the event target at all and works fine but not for the methods in app.js!

big thanks for the tip!

Finally working this way:

<a href="#" data-store-id="123" data-reference="456" @click="$app.methods.registerFavs">add to favorites</a>

in app.js

    registerFavs: function (e) {

      var self = this

      var id = $(e.target).closest("a").data('store-id');
      var ref = $(e.target).closest("a").data('reference');

      console.log(id); //getting 123
      console.log(ref); //getting 456

    },

THANKS!

1 Like