点击Vue Apex Charts填充b-card：用数据绑定还是getElementById？

完全可以用双大括号数据绑定替代getElementById，这是Vue这类框架中更贴合响应式设计的做法，比手动操作DOM更简洁可靠。

具体实现步骤： #

1. 在组件的data中定义一个用于存储选中数据的变量：

data() {
  return {
    selectedData: ''
  }
}

2. 修改你的getAlertData方法，直接将获取到的图表数值赋值给这个变量：

getAlertData(event, chartContext, config){
  this.selectedData = this.series[0].data[config.dataPointIndex];
}

3. 在b-card容器中用双大括号绑定这个变量，实现数据的自动渲染：

<b-card>
  {{ selectedData }}
</b-card>

4. 确保Apex图表的点击事件正确关联到这个方法，在图表配置中添加：

chart: {
  events: {
    click: this.getAlertData
  }
}

为什么选数据绑定而非getElementById？ #

响应式数据绑定不需要手动操作DOM，框架会自动追踪变量变化并更新页面内容，避免了手动操作DOM可能引发的元素查找错误、更新不及时等问题，更符合现代前端框架的设计逻辑。

内容的提问来源于stack exchange，提问作者spring_hiber