数据在下一行消失 [英] Data is vanished in next line
问题描述
谁能解释一下这些代码中发生了什么，我该如何解决?
我在父级的 mounted 函数中获取数据并更新其数据.所以我在孩子身上有了新的对象.但是这个对象的属性值为空！
家长:
<div class="main-page"><main-content v-bind:config="mainContentConfig";/></模板>安装(){fetchData().then(editions => { editions.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))this.mainContentConfig.intranetEditions = [...editions];this.mainContentConfig.currentMenuIndex = 1;});}
孩子:
mounted(){console.log("AA==============>", this.config);console.log("BB==============>", this.config.intranetEditions);}但在控制台上我有:
当我用 this.config.intranetEditions 数组填充子类中的其他数据时，我发现了这个问题！
我也试过这个代码，但没有区别！
[...this.config.intranetEditions]Edit 2 这段代码也测试过了，但没有！
console.log("AA==============>", this.config);console.log("BB==============>", JSON.stringify(this.config.intranetEditions));子组件已挂载但父组件尚未完成，因此 this.config 是观察者，直到 fetch 完成完成(所以 then 被触发)和 var 完成.
你能试试看子组件中的道具 config 吗?然后你会看到 this.config 什么时候完成.
https://vuejs.org/v2/guide/computed.html#Watchers
更新示例:
子组件
观看:{配置(新值){console.log("AA==============>", newValue.intranetEditions);检查配置值()；},},方法: {检查配置值(){console.log("BB==============>", this.config.intranetEditions);};},所以你可以使用 newValue 在观察者中做一些事情，或者触发一个方法并使用 this.config.在这种情况下，两个控制台将打印相同的内容.
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:
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));
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://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.
这篇关于数据在下一行消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
