嗨,我无法理解如何在vue js中改变prop值。我正在使用vue-chartjs使用chartjs动态重新渲染图表。行为有效但我在启动updateValues()函数时收到控制台消息警告。
Vue警告]:避免直接改变道具,因为该值将是 父组件重新渲染时会覆盖。相反,使用 基于道具价值的数据或计算属性。支持存在 变异:“myData”
如何正确改变道具?
// Parent Component
<bar-graph :myData="dataCollection" :height="250"></bar-graph>
data () {
return {
dataCollection: {
labels: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: 'Sample Lables',
backgroundColor: 'red',
data: [5000, 5000, 5000, 5000, 5500, 5500, 10000, 5500, 5500]
}
]
}
}
},
methods: {
updateValues () {
this.dataCollection = {
labels: [5000, 5000, 5000, 5000, 5500, 5500, 10000, 5500, 5500],
datasets: [
{
label: 'Sample Lables',
backgroundColor: 'red',
data: [5000, 5000, 5000, 5000, 5500, 5500, 10000, 5500, 5500]
}
]
}
}
}
//Child component bar graph
import { Bar } from 'vue-chartjs'
export default Bar.extend({
props: ['myData'],
mounted () {
this.renderChart(this.myData, {responsive: true, maintainAspectRatio: false})
},
watch: {
myData: function () {
console.log('destroy')
this._chart.destroy()
this.renderChart(this.myData, {responsive: true, maintainAspectRatio: false})
}
}
})
答案 0 :(得分:0)
根据道具价值使用数据或计算属性。
将您的道具绑定到数据属性
data() {
return {
myPropData: myData
}
}
然后只使用myPropData
答案 1 :(得分:0)
由于它是组件的输入,因此无法“适当地”更改道具。
我建议将通过prop传递的数据导入到组件的状态,然后进行相应的使用。通过使用此本地副本,您可以避免更改道具并得到警告。
export default Bar.extend({
props: ['myData'],
data() {
return {
passedData: null
}
}
mounted() {
// Import data from prop into component's state
this.passedData == this.myData;
// Use as desired
this.renderChart(this.myData, {
responsive: true,
maintainAspectRatio: false
})
},
watch: {
myData: function() {
console.log('destroy')
this._chart.destroy()
this.renderChart(this.myData, {
responsive: true,
maintainAspectRatio: false
})
}
}
})
答案 2 :(得分:0)
@TheCascadian答案的注释/补充:如果myData
是Object
,则this.passedData
将是对同一对象的引用,因此您仍然会收到该警告。您可能会考虑使用cloneDeep
中的lodash
来拥有属性的真实内部副本,并在内部进行相应的使用。