Vue 在计算数据之前先创建 Component

Question

我遇到了 vue 的问题。我已经创建了一个图表，我可以用数据初始化它，但是当我按下其中一个复选框时没有任何反应，它会在一步后发生。

例如：我按下复选框一：没有任何变化。我按下复选框二：复选框一的数据被添加我按下复选框一：添加一和二的数据 ...

我希望有人能帮助我。

谢谢:)

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
   }
}

Answer 1

代替@click，使用@change

@click="changeGraph"

Answer 2

发生这种情况是因为对象对它没有先验的属性没有反应。为此，您可以使用 Vue 的 set 功能：

this.$set(object, property, value)

// or

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

这样属性的反应性就会起作用。

您可以阅读更多相关信息 here。

Vue 在计算数据之前先创建 Component

Vue creates Component before calculating data

javascript

vue.js

vue-component