Adding a Vue.js v-on event to D3 SVG element

Question

Is it possible to add a VueJS v-on event to an SVG element in D3? I want to use the v-on.mouseover functionality to each rectangle element of an SVG. I am trying to do so by adding v-on:mouseover="active = !active" as an attribute in D3, as in the following snippet:

h.selectAll('.bar')
  .data(myCSVdata)
  .enter()
  .append('g')
  .attr('v-on:mouseover', 'active = !active')
  .attr('class', 'bars')
  .append('rect')

but D3 seems to strip out the v-on: and I am left with

user_5768908 · Answer

The problem here...

.attr('v-on:mouseover', 'active = !active')

... is that the colon normally defines the namespace, and D3 will think that v-on is a namespace.

There is a solution, though: add another colon before it.

.attr(':v-on:mouseover', 'active = !active')
//     ^---- extra colon here

Here is a demo:

var div = d3.select("body")
  .append("div")
  .attr(':v-on:mouseover', 'active = !active');
  
console.log(div.node())

Adding a Vue.js v-on event to D3 SVG element

1 Answers