javascript - "No data available in table"VueJS

Question

我正在构建一个实时网络应用程序。服务器运行在 Node.js 上，客户端使用 VueJS 编写。我编写了一个 API 来获取玩家信息。当我到达 REST 端点时，数据会以表格的形式显示。虽然数据显示正确，但第一行显示“表中没有可用数据”。

这是我的代码

import urlMixin from "./../mixins/url.js";

export default {

    data() {
        return {
            playerData: "",
            errors:[]
        }
    },

    created: function(){
        this.getAllPlayers();
    },

    mixins: [urlMixin],

    methods: {
        getAllPlayers: function(){
            axios.get(`${this.url}/players`)
            .then(response =>{
                console.log(response.data.results);

                this.playerData = response.data.results;

                for(let i=0; i<this.playerData.length;i++){
                    this.playerData[i].image = 
                        "data:image/jpeg;base64," +
                        btoa(
                            new Uint8Array(this.playerData[i].image.data).reduce(
                                (data, byte) => data + String.fromCharCode(byte),
                                ""
                        )
                    );
                }

            })
            .catch(e => {
                this.errors.push(e);
            });
        }
    },

    mounted() {

        $(function() {
            $('#player-table').DataTable({
                dom: '<"ui center aligned"f><"ui segment"t><"right-aligned-panel"p>',
                language: {
                    info: "",
                    paginate: {
                        first: "first",
                        previous: "<i class='fa fa-chevron-left'></i>",
                        next: "<i class='fa fa-chevron-right'></i>",
                        last: "last"
                    }
                }
            });

        });

    }
}

<style scoped>
    .bread-segment {
        margin-bottom: 10px;
        background: none;
        box-shadow: none;
        border: none;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template>
	<div class="ui center aligned animated fadeIn" style="padding:20px;">
		<table id="player-table" class="ui small table selectable " cellspacing="0" width="100%">
				<thead>
					<tr>
                        <th>Photo</th>
                        <th>Name</th>
						<th>Age</th>
						<th>Sex</th>
					</tr>
				</thead>
				
				<tbody>
					<tr v-for="playerInfo in playerData">
						<td><img class="ui mini rounded image" :src="playerInfo.image"></td>
                  
                        <td><a :href="'#/profile?name='+playerInfo.fname+'%20'+playerInfo.lname">{{playerInfo.fname}} {{playerInfo.lname}}</a></td>
                        
						<td>{{playerInfo.age}}</td>
						<td>{{playerInfo.sex}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

我做错了什么？如何确保不会出现“表中没有可用数据”文本？

Answer 1

您正在同时使用 jQuery、DataTables 和 Vue。虽然这是可能做到的，但这些库的生命周期功能必然会产生干扰。

vue社区有几个表库如https://github.com/matfish2/vue-tables-2