Vue在计算数据之前创建组件答案

【问题标题】：Vue creates Component before calculating dataVue在计算数据之前创建组件
【发布时间】：2021-12-22 23:37:46
【问题描述】：

我遇到了 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
   }
}

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

用@change代替@click

@click="changeGraph"

【讨论】：

所以我在发这篇文章之前没有尝试过更改，但它没有用，现在它可以了，我不懂编码:D 但仍然非常感谢你:)
@贾斯汀太好了！如果它对您有用并且您很高兴-那么通常您会接受答案。这不仅会帮助其他人解决同样的问题，而且还意味着人们将来更有可能帮助您解决您遇到的任何其他问题。您可以在此处阅读有关接受的信息：stackoverflow.com/help/accepted-answer

【解决方案2】：

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

this.$set(object, property, value)

// or

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

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

您可以阅读有关此here 的更多信息。

【讨论】：

将测试这是否也有效，听起来像是一个更安全的解决方案：D