how to get each data from response api laravel in vue js 3

Question

Need help , i can get all data from response api but having some problem when try to get data (looping data ) from key "get_item_cards" . Here's my response and code in vue js

Response api

<script setup>
<script>
import axios from 'axios'

export default {
    name: 'ListNotes',
    data() {
        return {
            cardNotes: [],
           
        }
    },
    mounted() {
        // console.log('Page mounted');
        this.getListNotes();
    },
    methods: {
        getListNotes() {
            axios.get('http://localhost:8000/api/card').then(res => {
                this.cardNotes = res.data.cardNotes
                console.log(this.cardNotes);

         
            })
        }
    }
}
</script>

how the best way to get all data & each data from relationship in vue js 3

Answer 1

Since the this.cardNote returns an array with three elements, you can use loop using v-for and access to the get_item_cards array like below,

<template>
  <div>
       <div v-for=(note, index) in cardNote>
           <p>{{node.cardname}}</p>
           <div v-for=(item, key) in note.get_item_cards>
               <p>{{item.content}}</p>
           </div>
           
       </div>
  </div>
</template>
<script setup>
<script>
import axios from 'axios'

export default {
    name: 'ListNotes',
    data() {
        return {
            cardNotes: [],
           
        }
    },
    mounted() {
        // console.log('Page mounted');
        this.getListNotes();
    },
    methods: {
        getListNotes() {
            axios.get('http://localhost:8000/api/card').then(res => {
                this.cardNotes = res.data.cardNotes
                console.log(this.cardNotes);

         
            })
        }
    }
}
</script>