如何使用挂载vue里面的数据值js
我想分配数据中的道具值并在挂载中使用这个数据值。现在我的做法是不工作:如何使用挂载vue里面的数据值js
dashboard.vue
<template>
<div>
<navigation-section :userid='userID'
:username='username'
:profilepic='profile_pic'
:unreads='unreads'>
</navigation-section>
</div>
</template>
<script>
import NavigationSection from '../components/NavigationSection';
export default {
components: {
NavigationSection,
},
data() {
return {
posts: [],
userID: '',
username: '',
unreads: [],
profile_pic: '',
}
},
created() {
this.getNavInfo();
},
methods: {
getNavInfo() {
axios.get('get_nav_info').then(response => {
this.userID = response.data.userID;
this.username = response.data.username;
this.profile_pic = response.data.profile_pic;
this.unreads = response.data.unreads;
})
}
}
}
</script>
NotificationSection(dashboard.vue儿童)
<template>
<div>
<notification :userid='userid' :unreads='unreads'></notification>
<h1>{{ username }}</h1>
<img :src='profilepic' :alt='profilepic'>
</div>
</template>
<script>
import Notification from '../components/Notification';
export default {
props:['userid', 'username', 'unreads', 'profilepic'],
components: {
Notification
}
}
</script>
通知(NotificationSection的孩子.vue)
<template>
<div>
// values shows in template
unreads array length: <div class="count" v-if='unreads.length > 0'>{{ unreads.length }}</div>
userid : <p>{{ userid }}</p>
</div>
</template>
<script>
export default {
props:['unreads', 'userid'],
computed: {
userID() {
return this.userid
}
},
mounted() {
console.log(this.userID); // ** problem : in console.log shows a blank instead of id which is working on template.
}
}
</script>
我编辑了这个问题。值显示在模板中,但是当我想要使用内置的安装或事件中的道具值尝试访问脚本内部的数据值它不工作。提前谢谢你的帮助。
您可以使用计算性能:
export default {
props: ['userid'],
computed: {
userID() {
return this.userid
}
},
mounted() {
console.log(this.userID);
}
}
或者干脆:
export default {
props: ['userid'],
mounted() {
console.log(this.userid);
}
}
当我试图访问在安装或创建它的ID变为空或空白。这真的很奇怪。因为它显示在模板:( – WahidSherief
嗯你可以更新与您的父组件模板的问题? – Ikbel
我已经编辑了与父母代码的问题,请看看。@Ikbel – WahidSherief
的问题不会出现在张贴代码。 – Bert
你是说代码没问题? @Bert – WahidSherief
是的。这是一个例子。唯一添加的是模板。有用。 https://codepen.io/Kradek/pen/jGVPvK?editors=1010 – Bert