“表中没有可用数据”VueJS

Posted 2023-02-22

【中文标题】“表中没有可用数据”VueJS

【英文标题】："No data available in table" 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" >
				<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>

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

【参考方案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;
    ....