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>

@darklightcode My header // Headers header('Access-Control-Allow-Origin: *'); header('Content-Type: application/json'); — naija
– naija, Commented Oct 8, 2018 at 9:26
@darklightcode Doesn't look like a CORS issue - codesandbox.io/s/… — Alex Mulchinock
– Alex Mulchinock, Commented Oct 8, 2018 at 9:28

tony19 · Accepted Answer · 2018-10-08 16:28:24Z

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 */]

tony19 · Accepted Answer · 2022-07-16 04:09:30Z

-1

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/[email protected]/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>

edited Jul 16, 2022 at 4:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 8, 2018 at 11:02

darklightcode

2,7721 gold badge16 silver badges19 bronze badges

3 Comments

darklightcode Over a year ago

@downvoter please explain on how my answer was inadequate and deserved a downvote

darklightcode Over a year ago

In the beforeMount method i trigger this.updateList method that updates todo list before the rendering occurs. It's basically your code, i just used beforeMount instead of created, see the vue docs for additional info and this post for a quick read stackoverflow.com/questions/40714319/… , please revise your vote, stackoverflow is not about fixing your code, it's about pointing you in the right direction.

tony19 Over a year ago

I'm guessing this answer was downvoted because (1) it claims Vue.set is required to fix the OP's problem (but that's not true, and the root problem is actually something else), and (2) it drastically changes the context of the API data (from playlist to todo list), which can be confusing to readers.

Collectives™ on Stack Overflow

PHP API WITH VUE.JS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related