“表中没有可用数据”VueJS答案

【问题标题】："No data available in table" VueJS“表中没有可用数据”VueJS
【发布时间】：2018-09-15 18:10:39
【问题描述】：

我正在构建一个实时 Web 应用程序。服务器在 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>

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

【问题讨论】：

标签： javascript jquery vue.js datatables vuejs2

【解决方案1】：

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

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

【讨论】：

谢谢丹尼尔！但是，我能够使用上面的代码呈现静态 HTML 数据。所以，我相信问题是不同的
可能是这样，你当然可以让它工作，只是指出你的解决方案将需要额外的复杂性。你在mount 上加载datatables，然后更新数据。即使您在创建时调用getAllPlayers，由于它的异步性质，它不会在挂载之前完成。因此，您将无法及时准备好数据。因为在 DataTable 创建后您没有回调来更新 DataTable 中的数据，所以您的表将保持为空。
但是你可以在getAllPlayers的then响应中移动jquery/datatables的东西
非常感谢丹尼尔！我将 jquery/datatables 的东西移到 then 响应中。现在工作正常！ :)

【解决方案2】：

您正在使用function 在getAllPlayers 方法中更改this 的上下文。相反，请使用 es6 箭头符号，如下所示：

getAllPlayers: () => {
    ....
        this.playerData = response.data.results;
    ....
}

【讨论】：