如何在循环中使用 vegaEmbed 函数传递通过 v-for 动态生成的元素 ID?
How to use the vegaEmbed function inside a loop passing element ids dynamically generated through a v-for?
我将 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 元素是动态生成的,显然这不起作用......有谁知道我如何解决这个问题?谢谢!
- 应该是
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);
}
})
}
}
希望这会有所帮助。
我将 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 元素是动态生成的,显然这不起作用......有谁知道我如何解决这个问题?谢谢!
- 应该是
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); } }) } }
希望这会有所帮助。