Question

我喜欢接受表单中的参数并提交。在提交时，我发送一个动作并返回响应并将它们分配给图表的参数。但除非我按两次提交按钮，否则不会发生变化。但是当我按下提交按钮时，标签正在获得更新，因为有一个链接到标签选择的v模型。但由于条形图组件没有v模型，因此没有更新。

 <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 - VueChart JS没有在store.dispatch上更新

2 个答案: