如何在Vue Chartkick中通过Props展示价格历史图表？

直接用计算属性处理props数据的转换即可，计算属性能自动响应props的变化，比data更适配这种动态依赖场景。

实现步骤 #

• 从props的prod.shops中提取首个店铺的scanHistory（日期数组）和priceHistory（价格数组）
• 按索引将两个数组的元素配对，转换成Chartkick需要的{日期: 价格}格式
• 加入边界判断，避免数据未加载或格式异常时出现报错

完整组件代码 #

<template>
  <line-chart :data="chartData"></line-chart>
</template>

<script>
export default {
  props: ["prod"],
  computed: {
    chartData() {
      const result = {};
      // 先判断shops数组是否存在且有数据
      if (!this.prod?.shops?.length) return result;

      const firstShop = this.prod.shops[0];
      const { scanHistory, priceHistory } = firstShop;

      // 校验两个数组的有效性
      if (!scanHistory || !priceHistory || scanHistory.length !== priceHistory.length) {
        return result;
      }

      // 遍历数组，配对日期与价格
      scanHistory.forEach((date, index) => {
        result[date] = priceHistory[index];
      });

      return result;
    }
  }
};
</script>

关键说明 #

• 用?.可选链操作符避免数据未加载完成时的undefined报错
• 计算属性chartData会随prod props的更新自动重新计算，保证图表数据实时同步
• 边界处理确保数据异常时图表能渲染空状态，不会崩溃

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