VueJS 프로펠을 변환하는 방법

VueJS 프로펠을 변환하는 방법

안녕하세요. vue js에서 프로펠러 값을 변환하는 방법을 이해하는 데 문제가 있습니다.vue-chartjs를 사용하여 chartjs를 사용하여 차트를 동적으로 재작성하고 있습니다.동작은 동작하지만 updateValues() 함수를 해제하면 콘솔메시지가 표시됩니다.

Vue warn] :상위 구성 요소가 다시 렌더링될 때마다 값이 덮어쓰기되므로 프로포트를 직접 변환하지 마십시오.대신 프로펠러 값을 기반으로 데이터 또는 계산된 속성을 사용하십시오.변환되는 프로펠러: "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})
    }
  }
})

프로펠은 컴포넌트에 대한 입력이므로 프로펠을 "적절하게" 변환하는 방법은 없습니다.

프로펠러를 통해 전달된 데이터를 컴포넌트 상태로 Import한 후 그에 따라 사용할 것을 권장합니다.이 로컬 복사본을 사용하면 프로펠이 변환되지 않고 경고가 표시되지 않습니다.

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
      })
    }
  }
})

@TheCascadian의 답변에 대한 코멘트/추가사항:한다면myData는 입니다.Object,그리고나서this.passedData동일한 물체를 참조할 수 있으므로 경고 메시지가 계속 표시됩니다.를 사용하는 것을 검토해 주십시오.cloneDeep부터lodash부동산의 실제 내부 복사본을 가지고 그에 따라 내부적으로 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/43034098/how-to-mutate-vuejs-prop