Vue3使用v-for渲染axios获取的表格数据不显示问题

安全阿岳

2026-8-29

问题原因

你遇到的渲染问题和axios请求逻辑无关，是代码不符合Vue3的语法规则、字段不匹配导致的，Vue2对这类问题容错度高会静默降级，Vue3校验更严格会直接中断渲染，具体问题点如下：

v-for语法错误：你在遍历treatment的tr标签上写了v-bind:value="index"，但没有在v-for声明中定义index变量，属于未声明变量直接使用；同时Vue3强制要求v-for必须绑定唯一的key属性，缺失key也会触发渲染异常。
模板字段和接口返回完全不匹配：你模板中绑定的data.nombre_tratamiento、data.compania.nombre、data.precio_sesion字段，在你贴出的接口返回JSON中不存在，尤其是访问不存在的compania对象的nombre属性时，会直接抛出JS错误打断整个组件渲染。
表格DOM结构不匹配：你表头通过v-for生成了5个th列，但表体每行写了6个td，列数不一致会导致表格渲染错乱。
额外的功能bug：remove方法中then回调参数命名和内部使用的变量不一致，会在点击删除时触发报错，不过不影响初始列表渲染。

修复步骤

按以下顺序修改代码即可正常渲染：

修正v-for语法，补全key声明，删除无用的value绑定
把tbody中tr标签的v-for写法替换为：

<tr v-for="(data, index) in treatment" :key="data.id">

这里用每条数据的唯一id作为key，比用索引作为key的渲染性能更好，tr标签本身不需要value属性，直接删除对应绑定即可。

对齐模板字段和接口返回值
如果后端接口还没调整到返回你需要的诊疗项目、关联公司、单价字段，可以先临时匹配现有返回字段做测试，访问嵌套属性时加可选链避免报错：

<td>{{ data.id }}</td>
<td>{{ data.nombre }}</td>
<!-- 等后端返回关联公司数据后再放开，加?.可选链避免compania不存在时报错
<td>{{ data.compania?.nombre }}</td>
-->
<td>{{ data.tlf1 }}</td>
<td><a href="#" class="btn btn-info">Edit</a></td>
<td><a href="#" class="btn btn-info" @click.prevent="remove(data.id)">Remove</a></td>

如果后端已经返回了正确字段，只需要把模板里的字段名和返回值对齐即可，嵌套对象访问务必加可选链做容错。

对齐表头表体列数
在columns数组中补上公司名称对应的列配置，保证th和td数量一致：

columns: [
    { label: 'ID', field: 'id' },
    { label: 'Name', field: 'nombre' },
    { label: 'Company', field: 'compania' }, // 新增公司列
    { label: 'Price', field: 'precio_sesion' },
    { label: 'Edit', field: 'edit' },
    { label: 'Remove', field: 'remove' },
]

优化数据拉取逻辑，修复remove方法bug
把列表拉取逻辑抽成单独方法，方便初始化和删除操作后刷新列表，同时修复remove方法的变量名错误：

export default {
    created() {
        this.getTreatmentList()
    },
    methods: {
        // 抽离列表拉取逻辑
        getTreatmentList() {
            axios.get('/treatmentCompany/getAllTreatmentCompany')
            .then((response) => {
                this.treatment = response.data;
            })
            .catch(error => console.log(error))
        },
        remove(treatmentId) {
            if(confirm("Do you really want to delete?")){
                axios.post('/treatmentCompany/destroy', {treatment: treatmentId})
                .then(() => {
                    // 删除成功后重新拉取列表刷新
                    this.getTreatmentList()
                })
                .catch(error => console.log(error))
            }
        },
    },
    data(){
        return {
            searchTerm: '',
            treatment: [],
            columns: [
                // 上面修正后的columns配置放这里
            ]
        }
    }
}

改完后打开浏览器控制台，如果还有报错可以直接看Vue3的明确报错提示，基本都是未声明变量、访问undefined属性、v-for缺失key这类基础问题，定位修复即可。

内容的提问来源于stack exchange，提问作者scorpions78