Vue creates Component before calculating data-CodePudding

I'm facing a issue with vue. I have created a chart and i can initalize it with data, but when i press one of the check-boxes nothing happens, it happens one step later.

so for example: I press check-box one: Nothing changes. I press check-box two: Data of check-box one gets added I press check-box one: Data of one and two are added ...

I hope someone can help me with this.

Thanks :)

App.vue

<template>
   <div v-if="show"> 
      <div id="Chart">
          <Chart v-bind:chartData="this.chartData"/>                         
      </div>
   </div>
   <div>        
      <checkbox @click="changeGraph">Select Data 1</checkbox>
      <checkbox @click="changeGraph">Select Data 2</checkbox>
    </div>
</template>

export default {
   name: 'App', 
   components: {
       Chart,
   },
   data () {
      return {
         chartData: {};
      }
   },
   methods: {
      changeGraph() {
        // Filling chartData in here
      }
   },
   mounted: {
      // init chartData here
   }
}

CodePudding user response：

Instead of @click, use @change

@click="changeGraph"

CodePudding user response：

This happens because the object is not reactive to a property that it did not have a priori. For this you can use the set functionality of Vue:

this.$set(object, property, value)

// or

import Vue from 'vue'
Vue.set(object, property, value)

This way the reactivity for that property will work.

You can read more about this here.