Tengo un problema con vue. Creé un gráfico y puedo inicializarlo con datos, pero cuando presiono una de las casillas de verificación, no sucede nada, sucede un paso después.
entonces, por ejemplo: presiono la casilla de verificación uno: Nada cambia. Presiono la casilla de verificación dos: Se agregan los datos de la casilla de verificación uno. Presiono la casilla de verificación uno: Se agregan los datos de uno y dos...
Espero que alguien pueda ayudarme con esto.
Gracias :)
aplicación.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 } }En lugar de @click , usa @change
@click="changeGraph"Esto sucede porque el objeto no es reactivo a una propiedad que no tenía a priori. Para esto, puede usar la funcionalidad set de Vue:
this.$set(object, property, value) // or import Vue from 'vue' Vue.set(object, property, value)De esta manera funcionará la reactividad para esa propiedad.
Puedes leer más sobre esto aquí .