带有 VUE.JS 的 PHP API

Question

我使用 PHP 创建了我的 API，链接如下：https://monstajams.co/streaming/rest/api/album/read.php

但是每当我使用 axios 将其放入我的 Vue.js (Home.vue) 文件中时，前端都不会显示任何数据。

下面是我的代码：

<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

问题是您的代码错误地假定axios.get() 解析为原始响应，但它实际上解析为response wrapper，其中原始响应包含在包装器的data 子属性中，巧合的是名称作为响应中的目标属性。

您可以更改您的 Axios 响应处理程序以获取内部 data 字段：

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

或者不理会您的前端，并更新您的 PHP 后端以仅在响应中发送数组：

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

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

Answer 2

您没有根据 Vue 文档更新您的数据。

有关被动更改，请参阅此document。

在下面的示例中，我在安装 Vue 之前更新了我的列表，因此可以相应地进行渲染。

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>