子组件中的变量为空，VueJs答案

【问题标题】：Variable is empty in child component, VueJs子组件中的变量为空，VueJs
【发布时间】：2021-01-10 09:45:22
【问题描述】：

当一个事件被触发时，我调用一个函数来填充一个变量并从一个子组件打开一个模式。但是，在那里，我的新变量是空的，如果我关闭/重新打开模式我有数据，所以数据会在之后加载。

我在获得数据后尝试加载该子组件，但到现在为止都没有。

家长

  <p class="open-modal-button" @click="openUpdatesModal">
     <i class="fas fa-sync"></i>
     Check for updates
  </p>

  <check-for-updates-modal
    v-if="check_for_updates_values.account_name != ''"
    :modalUpdatesOpen="modalUpdatesOpen"
    :check_for_updates_values="check_for_updates_values"
  />

  data() {
    return {
      //code....
      check_for_updates_values: [],
      modalUpdatesOpen: false,
    };
  }

openUpdatesModal() {
  this.temporaryChecker();
},

temporaryChecker() {
  this.check_for_updates_values.account_name = this.account_name;
  this.check_for_updates_values.company_registration_number = this.company_registration_number;
  this.check_for_updates_values.registered_address = this.registered_address;

  this.modalUpdatesOpen = !this.modalUpdatesOpen;
},

儿童

<b-col>{{check_for_updates_values.account_name}}</b-col>

  props: [
    "modalUpdatesOpen",
    "check_for_updates_values",
  ],

  watch: {
    modalUpdatesOpen() {
      this.checkForChanges();
      this.$bvModal.show("modal-check-for-updates");
    },
  },

【问题讨论】：

如何在组件中初始化check_for_updates_values 数据变量？
check_for_updates_values: []，考虑到您将其视为一个对象，应该是一个对象
我没有复制整个代码，因为太多了。我试图在这里只复制必要的部分。如果我在我的孩子手表中做一个 console.log ，对于 check_for_updates_values ，数据在那里，但在模板中仍然是空的。
如上所述，check_for_updates_values = {} 在您的数据中然后使用this.$set(check_for_updates_values, 'account_name', this.account_name) 因为您的对象对它的属性变化没有反应，因为它们在初始化时不存在
@SélimAchour，你是对的，你的代码也是如此。谢谢！

标签： javascript vue.js vuejs2

【解决方案1】：

如果你真的将check_for_updates_values 初始化为一个数组，这就是问题所在。根据你的用法，应该是一个对象。

另外，请注意显式初始化对象上的每个现有键，否则 Vue 将无法为响应式观察者注册它们！这意味着如果你有一个空的数据对象foo: {}，任何时候你添加一个属性，它都不会刷新vue foo.label = 'test' // won't render properly。

data() {
   return {
      check_for_updates_values: {
         account_name: null,
         company_registration_number: null,
         registered_address: null,
      },
   };
}

【讨论】：

好的，这就是问题所在。谢谢！