vue3，axios获取的数据渲染不到页面上

Question

环境：vue3
问题：Axios从数据库获得的数据渲染不到页面上。数据能从数据库获取成功，然后将他的数据赋给一个ref定义的数据classList，在then中输出classList能输出数据，在页面中输出就显示为空

1、输出response和classList

2、页面的显示，classList显示为空

具体代码

//Class.vue
<template>
    <h1>{{ classList }}</h1>
    <el-table :data="classList" style="width: 100%">
        <el-table-column prop="classId" label="班级编号" width="180" />
        <el-table-column prop="className" label="班级名称" width="180" />
        <el-table-column prop="classStudentNumber" label="班级人数" />
    </el-table>
</template>



<script>
import axios from 'axios'
import { onMounted, reactive} from 'vue'
import {useRoute} from 'vue-router'
    export default{
        name:'Class',
        setup(){
            
            const route = useRoute()
            // console.log(route.params.departmentId)//正确接收了参数
             
            let classList = reactive([])
            onMounted(() => {
                axios.get('http://localhost:8082/class', {
                        params: {
                            departmentId: route.params.departmentId
                        }
                    })
                    .then(function(response){
                        
                        console.log(response)    //输出见图1
                        classList=response.data
                        console.log(classList)  //输出见图1
                        
                        
                    })
                    .catch(function(error){
                        console.log("错误信息："+error);
                    });
            })
            
            return{
                classList
            }
        }
        
    }
    
</script>

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题分析：根据输出结果，在接收到后端数据之后，数据是成功赋值给了ref定义的数据classList，但是在页面上渲染却没有成功，因此问题可能出现在模板代码中。 解决方案：根据模板代码可以看出，使用了element-ui框架的el-table标签来渲染表格，那么问题可能出现在数据绑定的地方。根据文档，发现el-table标签中对应的data绑定应该是一个Array类型，而classList在代码中是一个响应式对象，因此需要通过toRefs将其转换为对象的ref类型，然后再进行绑定。 修改后的代码如下：

<template>
    <h1>{{ classList }}</h1>
    <el-table :data="toRefs(classList)" style="width: 100%">
        <el-table-column prop="classId" label="班级编号" width="180" />
        <el-table-column prop="className" label="班级名称" width="180" />
        <el-table-column prop="classStudentNumber" label="班级人数" />
    </el-table>
</template>
<script>
import axios from 'axios'
import { onMounted, reactive, toRefs } from 'vue'
import { useRoute } from 'vue-router'
export default{
    name:'Class',
    setup(){
        const route = useRoute()
        let classList = reactive([])
        onMounted(() => {
            axios.get('http://localhost:8082/class', {
                params: {
                    departmentId: route.params.departmentId
                }
            })
            .then(function(response){
                classList = response.data
            })
            .catch(function(error){
                console.log("错误信息："+error);
            });
        })
        return{
            classList: toRefs(classList)
        }
    }
}
</script>

经过修改后，将响应式对象classList通过toRefs转换为对象的ref类型，然后再进行绑定，这样就可以在页面上成功渲染了。