VueJS - Vue Chart JS 未在 store.dispatch 上更新

Question

我有一些类似从表单接受参数并提交的东西。在提交时，我发送一个动作和 return 响应并将它们分配给图表的参数。但是除非我按两次提交按钮，否则更改不会发生。但是当我按下提交按钮时，标签正在更新，因为有一个 v 模型链接到标签 select。但是由于条形图组件没有 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>

Answer 1

Chart.js 和 Vue Chart.js 默认情况下不是响应式的。在 Vue Chart.js docs

中查看

See this example

Answer 2

所以经过多次尝试，我通过将提交按钮重定向到两个不同的函数并在这两个函数之间添加超时来让它工作。

VueJS - Vue Chart JS 未在 store.dispatch 上更新

VueJS - VueChart JS not getting updated on store.dispatch

vue.js

vuex