Fire vue method from jquery on click event

Question

I'm trying to append a click event to an already existing dom element.

<div class="logMe" data-log-id="{{ data.log }}"></div>
...
<div id="events"></div>

I can't seem to access outside vue methods within my jquery click handler. It will throw logData is not defined.

new Vue({
   el: '#events',
   mounted() {
      $('.logMe').on('click', function() {
           const data = $(this).data('log-id');
           this.logData(data); // throws logData is not defined
      });
   },
   methods: {
      logData(id) {
         console.log(id); // never fires
         ... hit server
      },
   },
});

If anyone knows of a better way to append click events to .html elements that would be great! But how can I bubble up and find my vue methods? Here's a fiddle to illustrate

Possible duplicate of How to access the correct `this` inside a callback? — Bert
– Bert, Commented Aug 31, 2017 at 21:47
"logData(id) {" ... does not look like a valid syntax to me? — axel.michel
– axel.michel, Commented Aug 31, 2017 at 21:49
@Bert yep server rendered by a django template. I just want to append click events via vue. Not sure if possible :\ — Modelesq
– Modelesq, Commented Aug 31, 2017 at 21:57

Bert · Accepted Answer · 2019-05-10 21:35:34Z

To get your code working you would write it like this:

console.clear()

new Vue({
   el: '#events',
   mounted() {
      $('.logMe').on('click', (evt) => {
        console.log("called")
           const data = $(evt.target).data('logId');
           this.logData(data); 
      });
   },
   methods: {
      logData(id) {
         console.log(id);
      },
   },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div class="logMe" data-log-id="10">Something</div>
<div id="events"></div>

Note that the code uses an arrow function to define the click handler so that the appropriate this is captured to call the logData method on the Vue. However, doing that means you lose the this you want to get the data from the data property, so instead the example uses evt.target.

There is an alternative approach where you capture the Vue in a variable and call the method directly from your jQuery event.

console.clear()

const app = new Vue({
   el: '#events',
   methods: {
      logData(id) {
         console.log(id); // never fires
      },
   },
});

$('.logMe').on('click', function(){
  app.logData($(this).data("logId"))
});

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="logMe" data-log-id="10">Something</div>
<div id="events"></div>

Dazzle · Accepted Answer · 2019-04-25 13:37:23Z

-1

Much easier solution =

window.app = new Vue({
   el: "#app",
   methods: {
      myMethod(data) { ... }
   }
}

// jQuery
window.app.myMethod(data);

answered Apr 25, 2019 at 13:37

Dazzle

3,1254 gold badges31 silver badges53 bronze badges

Collectives™ on Stack Overflow

Fire vue method from jquery on click event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related