CODEWITHSUNDEEP
javascriptvue.js
Siamak Ferdos
Siamak Ferdos

Reputation: 3299

Data is vanished in next line

Can anyone please explain me what is happened in these codes and how can I solve it?

I get the data in the parent's mounted function and update its data. So I have the new object in the child. But the value of the property of this object is empty!

Parent:

<template>
    <div class="main-page">
        <main-content v-bind:config="mainContentConfig" />
    </div>
</template>
mounted(){
    fetchData().then(editions => { editions.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
        this.mainContentConfig.intranetEditions = [...editions];
        this.mainContentConfig.currentMenuIndex = 1;
    });
}

Child:

mounted(){
    console.log("AA==============>", this.config);
    console.log("BB==============>", this.config.intranetEditions);
}

But on the console I have:

enter image description here

I found this problem when I fill other data in the child class with this.config.intranetEditions array which always is empty!

Edit: I tried this code too, but no difference!

[...this.config.intranetEditions]

Edit 2 This code tested too, but nothing!

console.log("AA==============>", this.config);
console.log("BB==============>", JSON.stringify(this.config.intranetEditions));

Upvotes: 0

Views: 69

Answers (1)

Jose Fern&#225;ndez
Jose Fern&#225;ndez

Reputation: 139

The child-component is mounted but the parent fetch is not finished yet, so this.config is an observer until the fetch is done (so the then is fired) and the var fulfilled.

Can you try to watch the prop config in the child-component? then you will see when this.config is fulfilled.

https://v2.vuejs.org/v2/guide/computed.html#Watchers

UPDATE WITH EXAMPLE:

child-component

watch: {
  config(newValue) {
    console.log("AA==============>", newValue.intranetEditions);
    checkConfigValue();
  },
},

methods: {
  checkConfigValue() {
    console.log("BB==============>", this.config.intranetEditions);
  };
},

So you can wether do something in the watcher with the newValue, or trigger a method and use this.config. Both consoles, will print the same in this case.

Upvotes: 1

Related Questions