VueJS propを突然変異させる方法は？

Question

こんにちは私はどのようにvue jsの小道具の値を突然変異させるのか理解していません。私はvue-chartjsを使ってchartjを使って動的にグラフを再レンダリングしています。動作は動作しますが、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}) 
 
    } 
 
    } 
 
})

Answer 1

小道具の値に基づいて、データや計算されたプロパティを使用します。

だけのデータプロパティに

data() { 
    return { 
    myPropData: myData 
    } 
} 

をあなたの小道具をバインドし、警告のみが正しいmyPropData