PHP API WITH VUE.JS

Question

I Created my API with PHP and here is the link: https://monstajams.co/streaming/rest/api/album/read.php

But anytime i put it in my Vue.js (Home.vue) file using axios No data is displayed on the front-end.

Here is my code below:

<ul class="ta-track-list" v-if="faqs && faqs.length">
        <li class="ta-track-card column col-2 flex-column" v-for="faq of faqs">
            <div class="inner">
                <div class="artwork" role="link">
                    <span role="link" style="background-image: url(http://localhost/mymusic/assets/images/artwork/Wizkid-Soco.jpg);">

                    </span>
                        <div class="hover flex align-center justify-center">
                            <button id="webutton" class="ta-secondary play" onclick='playSong()'>
                                <i class="material-icons">play_arrow</i>
                            </button>
                        </div>
                </div>
                    <div class="info">
                        <div class="title white-primary-hover" role="lin">{{ faqs }}</div>  
                        <div class="username light-white-hover" role="link">{{ faq.artist }}</div>  
                        <div class="released">{{ faq.duration }}</div>
                    </div>  
            </div>
        </li>
    </ul>


<script>
import axios from 'axios';

export default {
    name: 'home',
    data: () =>({
        faqs: [],
        errors: []
    }),

    created() {
        axios.get('https://monstajams.co/streaming/rest/api/album/read')
        .then(response => {
            this.faqs = response.data;
        })
        .catch(e => {
            this.errors.push(e)
        })
    }
}
</script>

Answer 1

The problem is your code incorrectly assumes axios.get() resolves to the raw response, but it actually resolves to a response wrapper , where the raw response is contained in a data subproperty of the wrapper, which coincidentally has the same name as the target property within the response.

You can either change your Axios response handler to get the inner data field:

axios.get('https://monstajams.co/streaming/rest/api/album/read')
     .then(response => {
       // this.faqs = response.data; // response.data is the raw response, but you need the array within the response (also named "data")
       this.faqs = response.data.data;
     })

demo

Or leave your frontend alone, and update your PHP backend to send only the array in the response:

// FROM THIS RESPONSE:
{
  data: [/* PLAYLIST DATA */]
}

// TO THIS RESPONSE:
[/* PLAYLIST DATA */]

Answer 2

You are not updating your data accordingly to Vue docs.

For reactive changes see this document .

In the example below i update my list before Vue is mounted so rendering can occur accordingly.

 let vm = new Vue({ el: "#app", data: { todos: [] }, methods: { updateList() { axios.get('https://monstajams.co/streaming/rest/api/album/read') .then(res => { res.data.data.forEach(item => { Vue.set(vm.todos, vm.todos.length, { text: item.title, done: true }) }) }) } }, beforeMount() { this.updateList() }, })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> <div id="app"> <h2>Todos:</h2> <ol> <li v-for="todo in todos"> <label> <span> {{ todo.text }} </span> </label> </li> </ol> </div>