我遇到了一个名为Chartkick for Vue项目的图表库。https://chartkick.com/vue
我把数据作为道具传递给一个组件。我创建了一个数据元素，但它似乎无法访问道具，所以我使用了示例数据。

<script>
export default {
  props: ["prod"],
  data() {
    return {
      prices: {
        '2022-09-11': 2.99
      }
    }
  }
};
</script>

图表是使用html内的以下组件显示的：

<line-chart :data="prices"></line-chart>

不幸的是，我无法将props中的数据给予给这个组件。我必须提供scanHistory中的日期和priceHistory数组中第一个元素的价格，在这种情况下，我如何将它们连接起来并显示价格历史？数据示例：

{ "pid": 2, "name": "Ekologiškas kefyras, 2.5% rieb., 900 g", "productIconUrl": "https://rimibaltic-res.cloudinary.com/image/upload/b_white,c_fit,f_auto,h_480,q_auto,w_480/d_ecommerce:backend-fallback.png/MAT_1005450_PCE_LT", "shops": [ { "name": "Ekologiškas kefyras, 2.5% rieb., 900 g", "productUrl": "https://www.rimi.lt/e-parduotuve/lt/produktai/bakaleja/kava-ir-kakava/kavos-kapsules/kavos-kapsules-aroma-gold-oat-flat-white-162g/p/1005450", "shopIconUrl": "https://upload.wikimedia.org/wikipedia/en/thumb/c/c7/Rimi_Baltic_Logo.svg/220px-Rimi_Baltic_Logo.svg.png", "priceHistory": [ 2.99, 1.88, 1.47 ], "scanHistory": [ "2022-04-07", "2022-04-06", "2022-04-01" ] }

对于每一个scanHistory[]，它都应该加入priceHistory[]，这样我就有了类似{'2022-04-07': 2.99, '2022-04-06': 1.88}等的内容