Wie VueJS Prop zu mutieren?

Question

Hallo, ich habe Probleme zu verstehen, wie man einen Prop-Wert in Vue js mutieren. Ich verwende vue-chartjs, um ein Diagramm mithilfe von chartjs dynamisch neu zu rendern. Das Verhalten funktioniert, aber ich bekomme eine Konsolenmeldung Warnung, wenn ich die Funktion updateValues ​​() abfeuern.

Vue warnen]: Vermeiden Sie eine Stütze direkt, da der Wert mutiert werden überschrieben, wenn die übergeordnete Komponente wieder macht. Verwenden Sie stattdessen eine Daten oder eine berechnete Eigenschaft, die auf dem Prop-Wert basiert. Prop ist mutiert: "myData"

Wie mutiere ich die Requisite richtig mutieren?

// 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

Verwenden Sie ein Datum oder berechnete Eigenschaft auf dem Wert des prop basiert.

binden nur Ihre Stütze zu einer Dateneigenschaft

data() { 
    return { 
    myPropData: myData 
    } 
} 

und verwenden Sie dann nur myPropData