3

我正在使用 vue-chartjs 来呈现条形图。我有两个问题：

1）如果我使用从父组件推送到该子组件的道具，则不会呈现任何内容。（在下面的代码中，如果我将图表设置为使用 test_data，它工作正常，如果我设置为使用 chart_data，即使我作为道具推送的数据与 test_data 值完全相同，也不会呈现任何内容。

2) 我不断收到以下关于 columnsprop 和 dataprop 的错误 - 如您所见，我尝试使用计算属性，但这没有帮助。

vue-chartjs.min.js:8 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "columnsprop"

条形图.vue

<script>
import { Bar } from 'vue-chartjs'

export default Bar.extend({
  name: 'BarChart',
  props: ['dataprop', 'columnsprop'],
  computed: {
    datavalues: function(){
      return this.dataprop
    },
    columnvalues: function(){
      return this.columnsprop
    }
  },
  data () {
    return {
      options: {
        animation: false,
        responsive: true,
        maintainAspectRatio: false
      },
      test_data: {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
          {
            label: 'Example Data',
            backgroundColor: '#f87979',
            data: [100, 70, 50, 30, 20, 15, 10, 8, 7, 5]
          }
        ]
      },
      chart_data: {
        labels: this.columnvalues,
        datasets: [
          {
            label: 'Actual Data',
            backgroundColor: '#f87979',
            data: this.datavalues
          }
        ]
      }
    }
  },
  mounted () {
    this.renderChart(this.chart_data, this.options)
  },
  watch: {
    dataprop: function () {
      console.log('>>watch dataprop chart_data.datasets.data: ' + this.chart_data.datasets[0].data)
      console.log('>>watch dataprop test_data.datasets.data: ' + this.test_data.datasets[0].data)
      this._chart.destroy()
      this.renderChart(this.chart_data, this.options)
    }
  }
})
</script>

我也尝试过使用这里的临时属性：如何解决 [Vue 警告]：避免直接改变道具，因为该值将在 vue.js 2 上被覆盖？

IE：

data () {
    return {
          datatemp: [],
          columntemp: [],
          ...
    },
}
computed: {
  datavalues () {
    return this.datatemp
  },
  columnvalues () {
    return this.columntemp
  }
},
watch: {
    dataprop: function () {
      this._chart.destroy()
      this.datatemp = this.dataprop
      this.columntemp = this.columnsprop
      this.renderChart(this.chart_data, this.options)
    }
}

但仍然得到同样的错误

有任何想法吗？

4

0 回答 0