如何在不刷新页面的情况下更新Bootstrap Vue表格行数据

针对你的问题，直接修正代码里的关键问题，就能实现无需刷新页面、不用重新发起GET请求的实时更新：

1. 修正表格数据源绑定 #

你的<b-table>绑定的是:items="person"，但实际数据数组是persons（复数），这是核心笔误，修改后表格才能关联到正确的数据源：

<b-table
  :items="persons"
  :fields="fields"        
/>

2. 完善表单提交逻辑 #

当前提交方法没有正确获取目标用户数据，且需要确保本地数据更新的响应式：

• 给表单循环添加可靠的key，并传递当前用户对象到提交方法：

<form
  v-for="(person, index) in persons" 
  :key="person.id" <!-- 用唯一id当key比index更稳定 -->
  @submit.prevent="submit(person)"
>
  <input v-model="person.name">
  <button type="submit">保存</button>
</form>

• 修改submit方法，提交后可根据后端返回结果更新本地对应数据（如果后端返回完整更新数据）：

methods: {
  async submit(person) {
    try {
      const updatedPerson = await axios.put('/person', person);
      // 找到数组中对应项并替换，确保响应式更新
      const targetIndex = this.persons.findIndex(p => p.id === person.id);
      if (targetIndex !== -1) {
        this.persons[targetIndex] = updatedPerson.data;
      }
    } catch (err) {
      console.error('更新失败', err);
      // 可选：更新失败时恢复原数据
    }
  }
}

注：如果只是通过v-model修改输入框内容，本地persons数组已经实时更新，表格会自动同步显示；提交方法里的后端数据替换是为了和后端数据保持完全一致。

3. 优化数据初始化逻辑 #

beforeCreate钩子中无需用Vue.set，直接赋值即可：

async beforeCreate() {
  const response = await this.$store.dispatch("loadPerson");
  this.persons = response;
}

问题根源总结 #

• 表格绑定了错误的数据源，导致本地数据变化无法同步到表格；
• 表单循环的key用index不够可靠，可能影响Vue对列表项的追踪；
• 提交方法未正确关联目标用户数据，无法完成本地与后端的数据同步。

修正后，表格会在本地数据变化时自动刷新，无需刷新页面或重新发起GET请求。

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