如何在Vue中调用Laravel接口拉取数据库数据并循环渲染联系人列表

先对齐现有代码的偏差点 #

你现在的代码和目标效果的差异主要在4个地方：

• 请求方法不匹配：定义的Laravel路由是GET类型的/api/contacts，但之前的代码用POST请求了带后缀的/api/contacts/index，完全无法命中接口
• 缺少存储列表数据的响应变量：现有data里只有表单和错误提示的字段，没有专门存放接口返回联系人数组的位置
• 逻辑混同：组件挂载完成的mounted钩子没有触发拉取的逻辑，也没有封装独立的列表拉取方法，列表请求和创建表单的逻辑耦合在了一起；另外原代码里的console.log(response)写在axios请求的作用域外面，根本获取不到异步返回的响应值，属于无效代码
• 模板是写死的单条表格行，没有用循环指令遍历数据生成多行内容

1. 调整Script脚本逻辑 #

首先在data里新增空数组存放联系人数据，单独封装列表拉取方法，把请求方式改成匹配路由的GET，在组件挂载时自动触发拉取：

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 新增：承载接口返回的联系人列表
      contacts: [],
      errorMessage: "",
      form: {
        first_name: "",
        last_name: "",
        email: "",
        city: "",
        country: "",
        job_title: "",
      }
    };
  },
  methods: {
    // 单独封装列表拉取逻辑，后续新增/删除联系人后可以复用这个方法刷新列表
    fetchContacts() {
      this.errorMessage = "";
      // 严格匹配Laravel定义的GET路由路径，不要额外加/index后缀
      axios.get('/api/contacts')
        .then((response) => {
          // 将接口返回的contacts数组赋值给响应式变量，Vue会自动触发视图更新
          this.contacts = response.data.contacts;
        })
        .catch((error) => {
          this.errorMessage = error.response?.data?.message || '加载联系人列表失败';
          console.error("列表加载异常", error);
        });
    },
    processCreate() {
      this.errorMessage = "";
      // 后续补全新建联系人的POST请求逻辑即可，和列表拉取逻辑完全解耦
    }
  },
  mounted() {
    // 组件渲染到页面后自动触发一次列表拉取
    this.fetchContacts();
  },
};
</script>

注意：如果你的项目配置了跨域或者axios baseURL，直接写/api/contacts即可和路由自动匹配，不需要拼接额外路径。

2. 调整模板表格渲染逻辑 #

把写死的单条<tr>改成循环结构，用Vue的v-for指令遍历联系人数组，把字段对应填充到单元格里，给循环项绑定唯一的id作为key，补充空状态提示：

<template>
  <div class="row">
    <div class="col-sm-12">
      <h1 class="display-3">Contacts</h1>
      <p v-if="errorMessage" class="text-danger">{{ errorMessage }}</p>
      <table class="table table-striped">
        <thead>
          <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Email</td>
            <td>Job Title</td>
            <td>City</td>
            <td>Country</td>
            <td colspan="3">Actions</td>
          </tr>
        </thead>
        <tbody>
          <!-- 遍历contacts数组，为每条数据生成独立的表格行 -->
          <tr v-for="contact in contacts" :key="contact.id">
            <td>{{ contact.id }}</td>
            <td>{{ contact.first_name }} {{ contact.last_name }}</td>
            <td>{{ contact.email }}</td>
            <td>{{ contact.job_title }}</td>
            <td>{{ contact.city }}</td>
            <td>{{ contact.country }}</td>
            <td>
              <a :href="`/contacts/${contact.id}`" class="btn btn-warning">Show </a>
            </td>
            <td>
              <a :href="`/contacts/${contact.id}/edit`" class="btn btn-primary">Edit</a>
            </td>
            <td>
              <button class="btn btn-danger" type="submit">Delete</button>
            </td>
          </tr>
          <!-- 空列表状态提示 -->
          <tr v-if="contacts.length === 0 && !errorMessage">
            <td colspan="9" class="text-center">暂无联系人数据</td>
          </tr>
        </tbody>
      </table>
      <div>
        <router-link :to="{ name: 'contactsCreate' }">New Contact</router-link>
      </div>
    </div>
  </div>
</template>

效果验证点 #

代码修改完成后，打开页面检查3个点：

• 浏览器网络面板里的请求是否为GET方式，地址是否为/api/contacts，是否能正常返回带contacts数组的JSON
• Vue Devtools中查看contacts变量，是否成功拿到接口返回的列表数据
• 表格是否自动为每条联系人数据生成一行，对应字段是否正确填充，列表为空时是否显示提示文字

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