Vue.js中如何刷新Bootstrap模态框的新数据？

你的问题其实是Vue开发中很常见的「子组件本地状态未与父组件props同步」的场景——当前你依赖Bootstrap的模态框事件来初始化数据，但没处理父组件切换选中客户时props更新后的同步逻辑。下面是几种更贴合Vue原生特性的实现方式：

1. 监听Props变化自动同步本地数据 #

利用Vue的watch选项监听传入的props，当父组件切换客户导致props更新时，自动同步到子组件的本地数据中。这种方式最灵活，能确保本地状态始终和最新的props保持一致，不受模态框显示时机的影响。

修改子组件代码，添加监听逻辑：

export default {
  props: ['client_id', 'name', 'job_code', 'is_default'],
  data() {
    return {
      localJobCode: '',
      localIsDefault: ''
    };
  },
  methods: {
    doSave() {
      // 你的保存逻辑
    }
  },
  watch: {
    // 监听唯一标识client_id，一次性同步所有关联数据（更高效）
    client_id() {
      this.localJobCode = this.job_code;
      this.localIsDefault = this.is_default;
    }
    // 也可以单独监听每个props：
    // job_code(newVal) { this.localJobCode = newVal; }
    // is_default(newVal) { this.localIsDefault = newVal; }
  },
  // 组件创建时先同步一次初始数据
  created() {
    this.localJobCode = this.job_code;
    this.localIsDefault = this.is_default;
  }
}

2. 用key强制重建子组件 #

如果你的子组件逻辑比较简单，可以给子组件绑定一个唯一的key（比如客户的client_id）。当选中不同客户时，key的变化会触发Vue销毁旧的子组件实例并创建新的，这样子组件的初始化逻辑会重新执行，本地数据也会自动重置为最新的props值。

在父组件中使用子组件时添加key属性：

<edit-client-modal 
  :client_id="selectedClient.id"
  :name="selectedClient.name"
  :job_code="selectedClient.job_code"
  :is_default="selectedClient.is_default"
  :key="selectedClient.id"
></edit-client-modal>

这种方式简单直接，适合不需要保留子组件临时编辑状态的场景，确保每次打开模态框都是全新的组件实例。

3. 优化原有事件监听（可选） #

如果你想保留Bootstrap事件的方式，可以补充「关闭模态框时重置本地数据」的逻辑，同时确保每次显示模态框时都取最新的props：

mounted() {
  const modal = $(this.$refs.EditClientModal);
  modal.on('show.bs.modal', () => {
    // 每次显示时强制同步最新props
    this.localJobCode = this.job_code;
    this.localIsDefault = this.is_default;
  });
  modal.on('hidden.bs.modal', () => {
    // 关闭时清空本地数据，避免残留旧值
    this.localJobCode = '';
    this.localIsDefault = '';
  });
}

不过这种方式还是依赖jQuery和Bootstrap事件，不如前两种Vue原生方式优雅。

为什么原来的代码会出问题？ #

大概率是因为父组件切换选中客户时，props的更新是异步的，而你触发模态框显示的时机可能早于子组件props更新完成，导致show.bs.modal事件中取到的还是旧的props值。用watch或key的方式能完美规避这种异步更新的时序问题。

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