所以我得到这个错误
[Vue警告]:避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖。而是根据prop的值使用数据或计算属性。 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>
module_content.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中设置计算表达式或数据变量,并在模块内容中设置相同。
我似乎无法让它表现出来
任何人都可以提供帮助 感谢
答案 0 :(得分: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>
答案 1 :(得分:0)
您可以使用vuex存储图表数据