带有 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()解析为原始响应，但它实际上解析为响应包装器，其中原始响应包含在包装器的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;
     })

演示

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

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

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

Answer 2

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

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

在下面的示例中，我在安装 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>