[Vuejs]-Vue trigger update with custom d3 event

by

0👍

✅

I figured out the problem. It’s a facepalmer.

The module containing the d3 functions was being loaded with require, resulting in a single instance of it. Using it multiple times resulted in simply resetting its state. Post-processing the first instance of Chart on renderComplete simply referenced the singleton with state attributes from the final iteration.

To solve the problem, I refactored the d3chart.js into an es6 class, call with new, and no longer bind it in the component declaration:

The old way

In the Chart usage declaration in Loc:

<component :is="Chart" :myprop="myprop"></component>

and in the Loc definition:

data() {
  return {
    myprop: require('@/viz/d3chart.js')
  }
}

The new way

<component :is="Chart"></component>

and 

import myprop from '@/viz/d3chart.js'
... 
data() {
  return {
    myprop: new myprop()  
  }
}

Thanks for your help!

Leave a comment