我有root元素已登录用户数据和用户配置文件组件我将登录的用户数据作为props传递。
但是当我尝试在子组件中调用User对象属性时,它会将错误抛出为undefined。我没有看到儿童组件的任何价值。
app.js
[a1b node, c1d node, e1f node, g1h node]
比在子组件上我传递道具
Vue.component("usersmanagment", require("./components/usersmanagment"));
const app = new Vue({
el: "#app",
components: {
'v-select': vSelect
},
data() {
return {
AuthorizedUser: {
Email : "",
FirstName : "",
LastName : "",
CreatedUtcDateTime : "",
IsActive : ""
}
};
},
mounted() {
let vm = this;
vm.getAuthorisedUserProfile();
},
methods: {
getAuthorisedUserProfile() {
let vm = this;
// just return auth user data
}
});
在我的视图文件中我是Asp.Net MVC
module.exports = {
props : ["AuthorizedUser"],
};
我可以在vue chrome dev工具中看到授权用户获得更新,但其值不会在子组件上得到更新。
答案 0 :(得分:6)
你还没有把它包含在这里,但我的猜测是你使用camelCase
传递道具,但你需要使用kebab-case
传递它(参见:camelCase vs kebab-case)。所以请确保你在做:
<child-component :authorized-user="AuthorizedUser"></child-component>
答案 1 :(得分:0)
这就解决了我的问题。我必须使用子模板绑定道具。
<profile inline-template v-bind:authorized-user="authorizedUser">
<div>
<input type="text" v-model="authorizedUser.FirstName" class="form-control">
</div>
</profile>
答案 2 :(得分:0)
请注意,类似这样的情况也可能是由于v-for中缺少:key道具引起的。