Can't correctly pass the props to the child component in Vue 3-CodePudding

I want to pass data from the request via axios in the root component to the child using Vue. Unfortunately, only one field is displayed correctly - "title". But I also need to output "body".

Ps: This is my first time working with Vue, and I would like to know how it can be done 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: [], // -> I think here the problem, I need to get the response as a prop and validate them as well, as shown below
          title: {
            type: String,
            required: true
          },
          id: {
            type: Number,
            required: true
          },
          body: {
            type: String,
            required: true
          },
        }
      },

CodePudding user response：

So :title="item.title",:id="item.id" and :body="item.body" will be passed as props. So you don't need extra props you can directly use that variable.


<template>
    <div>
          {{title}} <br/> {{body}} <br/> {{id}}
    </div>
</template>

     props: {
          title: {
            type: String,
            required: true
          },
          id: {
            type: Number,
            required: true
          },
          body: {
            type: String,
            required: true
          },
        }
      },

CodePudding user response：

You can try like following snippet:

const app = Vue.createApp({
  data() {
    return {
      news: []
    }
  },
  async mounted() {
    const news = await axios
      .get('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5')
     this.news = news.data
  },
})
app.component('appNews', {
  template: `
    <div>
      <hr/>
      <p><b>{{ title }}<b></p>
      <p>{{ body }}</p> 
    </div>
  `,
  props: {
    title: {
      type: String,
      required: true
    },
    id: {
      type: Number,
      required: true
    },
    body: {
      type: String,
      required: true
    },
  }
})
app.mount('#demo')

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js" integrity="sha512-0qU9M9jfqPw6FKkPafM3gy2CBAvUWnYVOfNPDYKVuRTel1PrciTj a9P3loJB j0QmN2Y0JYQmkBBS8W mbezg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <app-news
      v-for="item in news"
      :key="item.id"
      :title="item.title"
      :id="item.id"
      :body="item.body"
      >
    </app-news>
</div>