如何在循环中使用 vegaEmbed 函数传递通过 v-for 动态生成的元素 ID？

Question

我将 Vega-Lite 与 VueJs 结合使用，我需要动态呈现用户操作后生成的图表列表。

我有以下 HTML 代码：

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

而在 JavaScript 方面，我有这样的东西：

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

但是渲染不会发生，因为 DOM 元素是动态生成的，显然这不起作用......有谁知道我如何解决这个问题？谢谢！

Answer 1

应该是this.possibleCharts而不是possibleCharts
如果 possibleCharts 是异步加载的，您应该观察这个值并在之后使用 $nextTick 进行渲染。谢谢。

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

希望这会有所帮助。

如何在循环中使用 vegaEmbed 函数传递通过 v-for 动态生成的元素 ID？

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

vue.js

vuejs2

vue-component

vega-lite