CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Beusebiu
Beusebiu

Reputation: 1523

Variable is empty in child component, VueJs

When an event is triggered, I call a function that fills a variable and opens a modal from a child component. But, there, my new variable is empty, and if I close/re-open modal I have the data, so the data is loaded after.

I tried to load that child component after I have data, but no good till now.

Parent

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

Child

<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");
    },
  },

Upvotes: 0

Views: 1000

Answers (1)

Kapcash
Kapcash

Reputation: 6919

If you really initialize check_for_updates_values as an array, this is the problem. According to your usage, it should be an object.

Also, be careful to explicitly initialize every existing key on the object, or Vue won't be able to register them for reactivity watchers! That means if you have a data object empty foo: {}, any time you add a property, it won't refresh the vue foo.label = 'test' // won't render properly.

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

Upvotes: 3

Related Questions