How to use the vegaEmbed function inside a loop passing element ids dynamically generated through a v-for?

Question

I'm using Vega-Lite with VueJs and I need to dynamically render a list of charts generated after a user action.

I have the following HTML code:

<div v-for="(chart, index) in possibleCharts" :key="index" :id="'chart'+index"></div>

And in the JavaScript side, I have something like this:

for(let i = 0; i<possibleCharts.length; i++){
    vegaEmbed("#chart"+i, possibleCharts[i].spec);
}

But rendering does not happen because the DOM elements are dynamically generated and apparently this does not work that way... Does anyone know how I can solve this problem? Thx!

Answer 1

• It should be this.possibleCharts instead of possibleCharts
• If possibleCharts is load asynchronously, you should watch this value and render after that using $nextTick. Thanks.

watch: {
  possibleCharts() {
    this.$nextTick(() => {
      for (let i = 0; i < this.possibleCharts.length; i++) {
        vegaEmbed("#chart" + i, this.possibleCharts[i].spec);
      }
    })
  }
}

Hope this will help.