Передача данных компоненту и использование их внутри функции данных этого компонента

#vue.js #vue-component

Вопрос:

Я передаю данные компоненту, и я могу получить эти данные от props него . Но я также хочу передать эти данные в функцию данных компонента.

Вот родительский код:

 <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>
 

Код компонента:

 <template>
    <div :post="post">
        <span>{{ post.title }}</span>
    </div>
</template>

<script>
export default{
    props: ['post'],
}
</script>
 

Я попытался добавить:

 data(){
    return{
        status: post.status
    }
}
 

к компоненту после props . Но я получил ошибку post not defined in data

Я попытался поискать об этом, но не нашел решения

Ответ №1:

В дочернем компоненте:

 <template>
  <!-- <div :post="post"> you don't send post here, you receive it thru props-->
  <div>
    <span>{{ post.title }}</span>
  </div>
</template>
 

затем в данных используйте реквизиты:

 data(){
  return{
    status: this.post.status
  }
}