Fetch data from database in Laravel 9 using Vue js 3-CodePudding

I wanted to read the data from the database and display it in the app.

I'm calling it like this :

 <h2  v-for="value in list_lowongan"> {{ value.title }}</h2>
 <p  v-for="value in list_lowongan">{{ value.body }}</p>

The script

export default {
  data() {
    return {
      'form': {
        title: '',
        body: '',
      },

      list_lowongan: []
    };
  },

    mounted() {
        console.log('on mounted');
        axios.get('post/list').then((response) => {
            console.log(response.data)
            this.list_lowongan = response.data
        }).catch((error) => {
            console.log(error)
        });
    },

The problem is, when I call it like that, It displays all the title in the database and the body in the database tables.

How can I make it so that it only display 1 title for each h2 class ?

CodePudding user response：

Use a wrapping div to hold your content and then loop over the div like so:

<div v-for="value in list_lowongan">
  <h2 > {{ value.title }}</h2>
  <p >{{ value.body }}</p>
</div>

CodePudding user response：

You have two for-loops independent of each other so they'll stack by themselves

You just need one for-loop to display a list of where each title and body are together

You can form it this way:

<div v-for="value in list_lowongan">
    <h2>{{ value.title }}</h2>
    <p>{{ value.body }}</p>
</div>