How to catch Jquery event from vue.js

user_1543833 0
Viewed 11699

Scenario: I have an iframe (which is hosted in the same domain, but purely use Jquery only) and it is already coded to trigger some events with parameters. And I have to catch those events with parameters in the parent vue.js application.

iframe:

$('*').mouseover(function (event) {
  var event = jQuery.Event( "mouseover-highlight" );
  event.top = $(this).offset().top;
  event.left = $(this).offset().left;
  parent.$('body').trigger(event);
});

vue.js

Catch this event somehow from the vue.js and set a div's css styles accordingly (Set the 'absolute' position). I have done it using vue.js before v2 comes by using Jquery inside the vue.js, But I've seen in the docs that vue.js isn't able to catch native events anymore. Any solution ?

vuejs2 vue.js iframe jquery javascript
4 Answers

You can use $on to programatically listen out for an event.

Nova.$on('resources-loaded', () => {
    console.log('Cooking with gas');
    // Do jQuery related stuff here.
});

This would work on any constant variable defined for the Vue instance. Eg. Vue.$on or app.$on etc.

user_45821320
Related