Events inhibited by Vue.js

[placaze]

I can't manage to use svg.js Events with Vue.js. The events declared with element.on are inhibited by Vue. I find a hack with attr({ 'v-on:mouseover': '...' }) but I can't find a way to change the attribute of the element.

function mouseOver(obj){
  console.log(obj);
  obj.attr({ opacity: 0.7 });
  obj.fill('#777');
}

var rect1 = mySvg.rect(120, 10).fill('#ff0').attr({ opacity: 0.2 }).move(80, 20).attr({ 'v-on:mouseover': 'this.mouseOver(this.rect1)' });
var rect2 = mySvg.rect(120, 10).fill('#ff0').attr({ opacity: 0.2 }).move(80, 70).attr({ 'v-on:mouseover': 'this.mouseOver(this.rect2)' });

Do you know a trick to do this? Thanks

[Fuzzyma]

Vue events are not native events. Vue uses its own abstraction for events. svg.js on the other hand uses real events. You shouldn't mix Vue and svg.js too much. You can attach event handlers in the created hook if you need them. Your example is too short to give any useful advice, tho...

[placaze]

I almost copy the full example. I just want to change the color of a rectangle when the mouse is over it.

You can attach event handlers in the created hook if you need them.

I'm not sure what it means, sorry.

[Fuzzyma]

You are using vue. So you have a component. Show me the component. And you should give the vue docs a read if you dont know about vues hooks :)

[placaze]

I want to make a single HTML file with Vue Router. Here is the whole file: https://paste.imirhil.fr/?b0f1210e2c06d534#9GHXwISMZ937vPliZI2CgTnaUDWEcpVVAvtcrF4cNvg= The SVG is on the "Cat 1" link. I just want to change the color of a rectangle when the mouse is over it and add an hyperlink to it. I added Vue.js just to have the Vue Router features.

[Fuzzyma]

You are basically not using vue at all. If you only need the router there are simpler versions for this. As I said already, read up on Vue and look into the lifecycle hooks where you can attach event handlers.