gpt4 book ai didi

javascript - 视觉 : Set child-component data with props values not working

转载 作者:行者123 更新时间:2023-11-29 23:28:53 26 4
gpt4 key购买 nike

简单地说,我有两个组件:

  • 父组件,它传递一个名为“profile”的 Prop 对象
  • 子组件 接收 profile 属性

配置文件值是这样的对象:

{
name: "Something",
email: "some@thing.com"
}

会发生什么?

子组件完美接收模板中的配置文件值,但似乎无法检索并将其设置为组件数据。

目标是什么?

我想用配置文件电子邮件属性初始化值“电子邮件”。

我期望什么?

export default {
props: ["profile"],
data() {
return {
email: this.profile.email
}
}
}

更新

我没有指定电子邮件是用作模型的数据值。我刚刚尝试删除它并简单地在模板中打印电子邮件的值,但效果不佳。

<!-- PARENT COMPONENT -->

<template>
<dialog-settings ref="dialogSettings" :profile="profile"></dialog-settings>
</template>

<script>

import Auth from "../services/apis/auth";
import DialogSettings from "../components/dialog-settings";

export default {
name: "app",
components: {
"dialog-settings": DialogSettings
},
beforeCreate() {
Auth.checkToken()
.then(profile => {
this.profile = profile;
})
.catch(err => {
});
},
data() {
return {
title: "App",
drawer: true,
profile: {},
navItems: []
};
}
}
</script>

<!-- CHILD COMPONENT -->

<template>
{{profile}} <!-- All the fields are passed and available (e.g. profile.email)-->
{{email}} <!-- Email is not defined -->
</template>

<script>

import Auth from "../services/apis/auth";
import DialogSettings from "../components/dialog-settings";

export default {
name: "dialog-settings",
props: ["profile"],
data() {
return {
email: this.profile.email
}
}
}
</script>

更新 2

我尝试了几种方法,我认为问题出在 beforeCreate() 中对 API 的异步调用。

最佳答案

你的子组件 email 属性应该是一个计算值

<!-- CHILD COMPONENT -->

<template>
<div>
{{profile}} <!-- All the fields are passed and available (e.g. profile.email)-->
{{email}} <!-- Email is not defined -->
</div>
</template>

<script>

import Auth from "../services/apis/auth";
import DialogSettings from "../components/dialog-settings";

export default {
name: "dialog-settings",
props: ["profile"],
data() {
return {
}
},
computed: {
email () {
return this.profile ? this.profile.email : 'no email yet'
}
}
}
</script>

那是因为父组件属性是在渲染子组件之后设置的。“数据”不是 react 性的,它在创建组件时设置一次。 Prop 'profile"是响应式(Reactive)的,所以首先当您渲染组件时,您应该看到 {} 并且在设置来自 Auth 的响应之后。如果您仍想将其保留在数据中,则可以像这样显示子组件:

<dialog-settings ref="dialogSettings" :profile="profile" v-if="profile.email"></dialog-settings>

但我不推荐这样做!

关于javascript - 视觉 : Set child-component data with props values not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48012031/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com