Vue渲染时提示vehicles未定义但data已声明的报错排查

问题修复方案 #

你遇到的报错核心原因是Vue组件data选项的写法不符合规范，直接按以下步骤修改即可：

1. 修复AllVehicles.vue的data定义

Vue2的规则：根实例的data可以直接写对象，但是所有单文件组件的data必须是函数，通过return返回响应式数据，你之前的写法会导致vehicles没有被注册为组件的响应式属性，渲染时自然无法识别。
把AllVehicles.vue的script部分替换为以下代码，其余逻辑保持不变：

<script>
export default {
    // 把原来的data: {}改成函数返回形式
    data() {
        return {
            vehicles: []
        }
    },
    created() {
        this.axios
            .get('http://localhost:8000/api/vehicles/')
            .then(response => {
                this.vehicles = response.data;
                console.log(this.vehicles);
            });
    },
    methods: {
        deleteVehicle(vid) {
            this.axios
                .delete(`http://localhost:8000/api/vehicles/${vid}`)
                .then(response => {
                    let i = this.vehicles.map(data => data.vid).indexOf(vid);
                    this.vehicles.splice(i, 1)
                });
        }
    }
}
</script>

2. 优化模板的v-for写法

Vue模板中访问组件属性不需要加this前缀，直接写变量名即可，把列表行代码改为：

<tr v-for="vehicle in vehicles" :key="vehicle.vid">

3. 冗余代码清理（可选）

你在app.js根实例里定义的vehicles: []是冗余代码，子组件不会自动继承根实例的data属性，直接删除即可，不影响功能。

修改完成后重新编译前端代码即可解决报错。

内容的提问来源于stack exchange，提问作者Battle J. Butts