VueJs,Vue-chartjs - 变异道具
VueJs, Vue-chartjs - mutating props
我收到这个错误
[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: "chartData" (found in )
现在这似乎是一个常见错误,但我不确定在这种情况下如何解决这个问题
我将 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 中设置计算表达式或数据变量,在模块内容中设置相同。
我似乎无法让它正常运行
谁能帮忙
谢谢
您可以使用vuex来存储图表的数据
不要直接改变道具。使用 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>
我收到这个错误
[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: "chartData" (found in )
现在这似乎是一个常见错误,但我不确定在这种情况下如何解决这个问题
我将 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 中设置计算表达式或数据变量,在模块内容中设置相同。
我似乎无法让它正常运行
谁能帮忙 谢谢
您可以使用vuex来存储图表的数据
不要直接改变道具。使用 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>