VueJs, 뷰 - chartjs -

Question

그래서이 오류를 받고 메신저 돌연변이 소품

[뷰 경고] : 상위 구성 요소의 재 - 렌더링 할 때마다 값을 덮어 쓰게됩니다 직접 때문에 소품을 돌연변이 마십시오. 대신, 지주의 값에 따라 데이터 또는 계산 된 특성을 사용하십시오. 변이 된 발의안 : "chartData"

지금 이것은 일반적인 오류 일 수 있지만, 뷰 - chartjs와 필자와 뷰를 사용하여이 경우에는 주위

메신저를 얻을하는 방법을 잘 메신저 것으로 보인다 (에서 발견) 다음

bar_chart.vue

<script> 
    import { Bar, mixins } from 'vue-chartjs' 

    export default Bar.extend({ 
    name:"bar_chart", 
    mixins: [mixins.reactiveProp], 
    props: ["width","height","options"], 
    mounted() { 

     this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false}); 
    } 
    }) 
</script> 

module_content.vue있어

<template> 
    <div id="module_content"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-md-6 bar_chart_test"> 
      <bar_chart 
      :chartData="DataSet" 
      :width="400" 
      :height="200"> 
      </bar_chart> 
      <button v-on:click="getBarDate">Hey there!</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 
import bar_chart from 'components/controls/bar_chart.vue' 

export default { 
    name: 'module_content', 
    components: { 
    bar_chart 
    }, 
    data: function() { 
    return { 
     data_source: {} 
    } 
    }, 
    methods: { 
    getBarDate: function() 
    { 
     this.DataSet = ({ 
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
      datasets: [ 
      { 
       label: 'GitHub Commits', 
       backgroundColor: '#f87979', 
       data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] 
      } 
      ] 
     });   
    } 
    }, 
    computed: { 
    DataSet: { 
    cached: false, 
     get: function() { 
     return this.data_source 
     }, 
     // setter 
     set: function (newValue) { 
     this.data_source = newValue; 
     } 
    }  
    } 
} 
</script> 

기본적으로 나는 그 함수 getBarDate가 ChartData를 (나중에 라인에서 아약스 호출로 대체 됨), 순열과 문서의 수백을 통해 여전히 이해할 수 없도록하고 싶다.

나는 그것을 직접 설정할 수 없다는 것을 이해하고 오류는 분명하지만, vue-chart mix를 사용하여 어떤 예제도 볼 수 없다고 생각하십니까?

저는 계산 된 표현식이나 데이터 변수를 bar_chart.vue에 설정하고 모듈 내용을 동일하게 설정하려고했습니다.

난 그냥 캔트 당신은 직접 소품을 돌연변이하지 마십시오 차트

Answer 1

의 데이터를 저장하는 vuex를 사용할 수는

사람이 감사

Answer 2

을 도와 드릴까요 행동을 얻을 것으로 보인다. ,에서와 같이 데이터 값을 초기화

data: function() { 
    return { 
    variableDataSet: this.Dataset, 
    } 
}, 

을 소품을 사용 variableDataSet이 변경 될 때 이벤트를 방출 같은 것을 사용하여 구성 요소에 의해 체포됩니다

watch: { 
    variableDataSet: function(val){ 
    this.$emit('datasetchanged', val); 
    } 
} 

,

<bar_chart 
    :chartData="DataSet" 
    @datasetchanged="value => { DataSet = value }"> 
</bar_chart>