Vue中修改JSON数据后如何重新渲染表格组件？

问题根源 #

你通过模态框POST数据到db.json后，父组件的表格数据源没有主动请求最新数据，所以页面不会自动更新，只有手动刷新时才会重新拉取数据。

推荐解决方案：子组件通知父组件重新获取数据 #

这是符合Vue数据驱动理念的标准做法，通过组件通信实现数据同步：

1. 修改子组件Modal.vue的handleSave方法

在POST请求成功后，通过$emit触发一个自定义事件，通知父组件刷新数据：

handleSave() {
  if (this.memberName.length > 0) {
    let userData = {
      name: this.memberName,
      email: this.memberEmail,
      contacts: this.memberContacts,
    };
    fetch("http://localhost:3000/teaminfo", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(userData),
    })
      .then(() => {
        // 通知父组件刷新表格数据
        this.$emit('refresh-table');
        // 通知父组件关闭模态框（避免子父状态不一致）
        this.$emit('update:visible', false);
        // 清空表单
        this.memberName = "";
        this.memberEmail = "";
        this.memberContacts = "";
      })
      .catch((err) => console.log(err));
  }
}

2. 父组件监听事件并刷新数据

假设父组件是表格所在页面，需要：

• 定义获取数据的方法
• 监听子组件的refresh-table事件，触发数据重新获取
• 用.sync同步模态框的显示状态（Vue2）或v-model:visible（Vue3）

示例父组件代码：

<template>
  <div>
    <TeamAddModal :visible.sync="modalVisible" @refresh-table="fetchTeamData" />
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>邮箱</th>
          <th>联系方式</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.email }}</td>
          <td>{{ item.contacts }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modalVisible: false,
      tableData: []
    }
  },
  methods: {
    async fetchTeamData() {
      // 重新从db.json拉取最新数据
      const res = await fetch("http://localhost:3000/teaminfo");
      this.tableData = await res.json();
    }
  },
  mounted() {
    // 初始化加载数据
    this.fetchTeamData();
  }
}
</script>

关于:key强制渲染的说明 #

你提到的:key方法确实能实现组件重新渲染，但它更像是一种“兜底方案”：通过修改组件的key值，让Vue销毁旧组件并创建新组件，从而重新执行数据加载逻辑。

如果要用这种方法，只需在父组件的表格或容器上绑定:key，并在收到刷新事件时更新key值：

<template>
  <table :key="refreshKey">
    <!-- 表格内容 -->
  </table>
</template>

<script>
export default {
  data() {
    return {
      refreshKey: 0
    }
  },
  methods: {
    refreshTable() {
      this.refreshKey += 1;
      this.fetchTeamData();
    }
  }
}
</script>

但不推荐优先使用这种方法，因为它本质是强制组件重置，而非主动更新数据，不符合Vue的响应式设计思路。

内容的提问来源于stack exchange，提问作者Young Aude Leigh