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
}
}
Instead of @click, use @change
@click="changeGraph"
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.