5

所以我收到这个错误

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“chartData”（在 中找到）

现在这似乎是一个常见错误，但我不确定在这种情况下如何解决它

我将 Vue 与 Vue-chartjs 一起使用，我得到了以下信息

bar_chart.vue

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

  export default Bar.extend({
    name:"bar_chart",
    mixins: [mixins.reactiveProp],
    props: ["width","height","options"],
    mounted () {

      this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false});
    }
  })
</script>

模块内容.vue

<template>
  <div id="module_content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 bar_chart_test">
          <bar_chart
            :chartData="DataSet"
            :width="400" 
            :height="200">
          </bar_chart>
          <button v-on:click="getBarDate">Hey there!</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bar_chart from 'components/controls/bar_chart.vue'

export default {
  name: 'module_content',
  components: {
    bar_chart
  },
  data: function () {
    return { 
      data_source: {}
    }
  },
  methods: {
    getBarDate: function()
    {
        this.DataSet = ({
          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]
            }
          ]
        });          
    }
  },
  computed: {
    DataSet: {
     cached: false,
      get: function () {
        return this.data_source
      },
      // setter
      set: function (newValue) {
        this.data_source = newValue;
      }
    }    
  }   
}
</script>

基本上，我希望该函数 getBarDate 能够设置 ChartData（稍后用 ajax 调用替换），经历了数百个排列和文档，但仍然不明白。

我想明白你不能直接设置它，那很好，错误很清楚，但是看不到任何使用 vue-chart 组合的例子？

我尝试在 bar_chart.vue 中设置计算表达式或数据变量，并且在模块内容中设置相同。

我似乎无法让它表现出来

谁能帮忙谢谢

4

2 回答 2

4

不要直接改变道具。使用 prop 初始化数据值，如下所示，

data: function () {
  return { 
    variableDataSet: this.Dataset,
  }
},

variableDataSet并在更改时发出事件，

watch: {
  variableDataSet: function(val){
    this.$emit('datasetchanged', val);
  }
}

这将被组件使用类似的东西捕获，

<bar_chart
  :chartData="DataSet"
  @datasetchanged="value => { DataSet = value }">
</bar_chart>
于 2017-04-08T17:22:40.190 回答
0

您可以使用vuex来存储图表的数据

于 2017-04-02T13:38:00.557 回答