VueJS - Store.dispatch에서 VueChart JS가 업데이트되지 않습니다.

VueJS - Store.dispatch에서 VueChart JS가 업데이트되지 않습니다.

양식에서 매개 변수를 수락하고 제출하는 것과 같은 것이 있습니다.제출 시 조치를 발송하고 응답을 반환하여 차트의 매개 변수에 할당합니다.하지만 제출 버튼을 두 번 누르지 않으면 변경이 되지 않습니다.하지만 제출 버튼을 누르면 라벨 셀렉트에 연결된 v-model이 있어서 라벨이 업데이트되고 있습니다.그러나 막대 차트 구성 요소에 대한 v-model이 없기 때문에 업데이트되지 않습니다.

 <template>
  <v-container fluid>     
     <v-card class="small" v-if="!empty">
        <bar-chart :chart-data="datacollection"></bar-chart>
    </v-card>   
  </v-container>
</template>

<script>
  import BarChart from './BarChart.js'
  import { mapGetters, mapActions } from "vuex";

  export default {
    name : "TestLegPerformance",
    components: {
      BarChart
    },
    data: () => ({   
      startdate: null,
      enddate: null,
      startmodal: false,
      endmodal: false,
      datacollection : {         
          labels: [],
          datasets: [
            {
                label: '',
                backgroundColor: '#C58917',
                data: []
            }
          ]
        },
      selected: [],     
      empty: true 
    }),
     computed: {
        ...mapGetters({
        planNames: "planNames",
        details: "details" //parameter that i return from getters
        })
    },
    mounted () {
        this.getAllPlanNamesAction();
    },

    methods: {
      ...mapActions(["getAllPlanNamesAction","getDetails"]),    


      //assigning values to the chart parameters
      changeData(){
        this.empty = false;
        let collectionClone = Object.assign({}, this.datacollection);
        collectionClone.datasets[0].label = this.selected;
        collectionClone.labels = this.details.months;
        collectionClone.datasets[0].data = this.details.sub_count;
        this.datacollection = collectionClone;
        console.log('Collection Clone: ',collectionClone)
      },

     // form submit action 
      submitAction(){
        this.empty = true;
        console.log("Plan: ",this.selected);
        console.log("Start Date: ",this.startdate);
        console.log("End Date: ",this.enddate);        
        this.$store.dispatch('getDetails',
         [this.selected,this.startdate,this.enddate])
        this.changeData();
      }
    }
  }
</script>

Chart.js 및 VueChart.js는 기본적으로 반응형이 아닙니다.Vue Chart.js 문서에서 이 내용을 참조하십시오.

이 예 참조

그래서 여러 번 시도한 끝에 제출 버튼을 두 개의 다른 기능으로 리디렉션하고 두 기능 사이에 시간 제한을 추가함으로써 작동하게 되었습니다.

언급URL : https://stackoverflow.com/questions/49104221/vuejs-vuechart-js-not-getting-updated-on-store-dispatch