Return to Question

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: [],
    };
  }

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

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

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"
  />


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

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: [],
    };
  }

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

When an event is triggered I call function that fill 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 data, so the data are 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"
  />


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

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"
  />


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