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

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

• javascript
• jquery
• vue.js
• vuejs2

• 1 Possible duplicate of How to access the correct `this` inside a callback? – Bert Commented Aug 31, 2017 at 21:47
• "logData(id) {" ... does not look like a valid syntax to me? – axel.michel Commented Aug 31, 2017 at 21:49
• @axel.michel updated methods: {} – Modelesq Commented Aug 31, 2017 at 21:52
• I assume {{data.log}} is set by something other than Vue? – Bert Commented Aug 31, 2017 at 21:55
• @Bert yep server rendered by a django template. I just want to append click events via vue. Not sure if possible :\ – Modelesq Commented Aug 31, 2017 at 21:57

2 Answers 2

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

Much easier solution =

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

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