Laravel+Vue.js应用ContactList无法正常显示数据 报contacts未定义警告

问题根源 #

你的Vue组件的配置项层级写错了，data、mounted 属于组件根级配置项，和methods是平级关系，你当前把这两个配置项都写到了methods对象内部，导致Vue无法正确识别data中声明的contacts响应式属性，所以触发了报错。

另外模板中把v-for写在<tbody>标签上会生成多个多余的<tbody>，建议把循环逻辑移到<tr>标签上，符合HTML规范。

修复后的完整ContactList.vue代码 #

<template>
    <div>
        <table>
            <tbody>
                <tr v-for="contact in contacts" :key="contact.id">
                    <th scope="row">{{ contact.id}}</th>
                    <td>{{ contact.name}}</td>
                    <td>{{ contact.email}}</td>
                    <td>{{ contact.designation}}</td>
                    <td>{{ contact.contact_no}}</td>
                    <td><button class="btn btn-danger btn-sm">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    name:'Contact',
    // 生命周期函数为根级配置，和methods平级
    created() {
        this.loadData();
    },
    mounted() {
        console.log('Contact List Component Mounted');
    },
    // data为根级配置，不能写在methods内部
    data() {
        return {
            url: document.head.querySelector('meta[name="url"]').content,
            contacts:[]
        }
    },
    methods: {
        loadData() {
            let url = this.url + '/api/getContacts';
            this.axios.get(url).then(response => {
                this.contacts = response.data
                console.log(this.contacts);
            });
        }
    }
}
</script>

可选补充排查点 #

如果修改后仍有异常可依次检查：

• 确认HTML头部存在name="url"的meta标签，内容为Laravel应用的根地址
• 确认axios已经挂载到Vue实例上，项目入口处需要配置类似Vue.prototype.axios = axios的逻辑
• 本地调试时确认Laravel接口没有跨域限制，可安装laravel-cors扩展处理跨域问题
• 打开浏览器Network面板，确认/api/getContacts接口返回200状态，且返回数据结构符合预期

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