Vue.js 在v-for内部渲染vuechart

我正在接触一个API，将结果保存在数据中，然后使用

v-for

在表中列出该数据。其中一列包含一个vuechart，但我似乎无法让它显示任何内容。如果我检查所创建的组件，它在道具数组中有数据，但在获取条形图时没有骰子

将vuechart图表放入

v-for

循环有什么特别之处吗？还是我传递的东西不对

代码如下：

TrendChart.js

import {Bar} from 'vue-chartjs'

export default {
  extends: Bar,
  name: 'TrendChart',
  props: ['data', 'options'],
  mounted() {
    this.renderChart(this.data, this.options)
  }
}

结果.vue

<table>
  <tr v-for="result in results">
  ...
  <td>
    <trend-chart :data="result.trends", :options="{responsive: false, maintainAspectRatio: false}"></trend-chart>
  ...
</table>

选中，this.renderChart（）的第一个参数是一个对象，而不是一个数组

例如，从上述指南中复制的内容：

{
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [
    {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
    }
  ]
}

修复它，然后图表应该可以正常工作

下面是一个简单的演示：

Vue.config.productionTip=false
让RawLineChart=window.VueChartJs.Bar
Vue.组件（“折线图”{
扩展：原始线条图，
道具：['data'，'options'，'name']，
挂载（）{
这是我的艺术({
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：this.name，
背景颜色：“#f87979”，
数据：这是数据
}
]
}，本页。选项）
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
结果:[
{名称：'图表A'，趋势：[40,39,20,40,39,80,40]}，
{名称：'图表B'，趋势：[140、139、110、140、139、80、140]}，
{名称：'图表C'，趋势：[240、139、210、140、239、80240]}
]
}
}
})

{{result.name}

谢谢您！我认为你最初的评论是正确的，我只是没有正确发送对象（之后可能无法键入…）。

{
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  datasets: [
    {
      label: 'GitHub Commits',
      backgroundColor: '#f87979',
      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
    }
  ]
}