[Vuejs]-PHP API WITH VUE.JS

by

0👍

✅

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

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

Leave a comment