如何改变VueJS道具?

时间:2017-03-26 20:22:26

标签: javascript chart.js vuejs2 vue-chartjs

嗨,我无法理解如何在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})
    }
  }
})

3 个答案:

答案 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答案的注释/补充:如果myDataObject,则this.passedData将是对同一对象的引用,因此您仍然会收到该警告。您可能会考虑使用cloneDeep中的lodash来拥有属性的真实内部副本,并在内部进行相应的使用。