I'm passing data to a component and I'm able to get this data from props. But I want to pass this data to the component data function as well.
Here is parent code:
<template>
<div>
<post v-for="(post, key) in posts" :key="key" :post="post" />
</div>
</template>
<script>
import post from './components/post';
export default{
components: {
post
},
data(){
return{
posts: [{/*Posts*/}]
}
}
}
</script>
Component code:
<template>
<div :post="post">
<span>{{ post.title }}</span>
</div>
</template>
<script>
export default{
props: ['post'],
}
</script>
I tried to add:
data(){
return{
status: post.status
}
}
to the component after props. But I got an error post not defined in data
I tried to search about it but didn't find a solution
In child component:
<template>
<!-- <div :post="post"> you don't send post here, you receive it thru props-->
<div>
<span>{{ post.title }}</span>
</div>
</template>
then in data use props:
data(){
return{
status: this.post.status
}
}