Is there a way to pass data from the request through axios in the root component to the child using Vue? Currently, only the "title" field is displayed correctly, but I also need to output the "body".
Note: This is my first time working with Vue and I'm seeking guidance on how to accomplish this correctly.
App.vue
<template>
<app-news
v-for="item in news"
:key="item.id"
:title="item.title"
:id="item.id"
:body="item.body"
>
</app-news>
</template>
export default {
data () {
return {
news: []
}
mounted() {
axios
.get('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5')
.then((resp) =>
this.news = resp.data
)
},
provide () {
return {
title: 'List of all news:',
news: this.news
}
},
AppNews.vue
<template>
<div>
<hr/>
<p v-for="item in news" :key="item.id">{{ item.body }}</p> // Need to pass here body content of the response from json
</div>
</template>
props: {
news: [], // -> The issue might be here, I need to receive the response as a prop and validate it as well, as shown below
title: {
type: String,
required: true
},
id: {
type: Number,
required: true
},
body: {
type: String,
required: true
},
}
},