Vue.js：数据更新时关闭模态框的实现方案咨询

没问题，我来帮你搞定这个需求！咱们一步步调整代码，实现数据更新时自动关闭模态框的功能：

1. 完善子组件center-view，添加模态框及关闭逻辑 #

首先给子组件添加模态框的状态管理、选中用户记录，以及完整的模态框模板，同时处理分配后的关闭逻辑：

Vue.component('center-view', {
  props: ["center", "allCenters"], // 传入所有中心数据，用于选择目标中心
  data() {
    return {
      showModal: false,
      selectedPerson: null,
      targetCenterId: null // 存储要分配到的目标中心ID
    };
  },
  template: `
    <ul style="border: 1px black solid">
      <li>Center : {{ center.name }}</li>
      <li v-for="p in center.people" :key="p">
        {{ p }}
        <button @click="openAssignModal(p)">Affect this user to another center (modal)</button>
      </li>

      <!-- 模态框实现 -->
      <div v-if="showModal" style="position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center;">
        <div style="background:white; padding:20px; border-radius:8px;">
          <h3>Assign {{ selectedPerson }} to another center</h3>
          <select v-model="targetCenterId">
            <option value="">Select a center</option>
            <option v-for="c in allCenters" :key="c.id" :value="c.id" :disabled="c.id === center.id">
              {{ c.name }}
            </option>
          </select>
          <button @click="assignUser" :disabled="!targetCenterId" style="margin-left:10px;">Confirm Assignment</button>
          <button @click="showModal = false" style="margin-left:10px;">Cancel</button>
        </div>
      </div>
    </ul>
  `,
  methods: {
    openAssignModal(person) {
      this.selectedPerson = person;
      this.showModal = true;
      this.targetCenterId = null; // 每次打开重置选择
    },
    async assignUser() {
      try {
        // 替换成你实际的AJAX请求，完成用户分配
        // await axios.post('/api/assign-user', {
        //   person: this.selectedPerson,
        //   fromCenterId: this.center.id,
        //   toCenterId: this.targetCenterId
        // });
        
        // 通知父组件刷新数据
        this.$emit('refresh-data');
        
        // 分配成功后直接关闭模态框
        this.showModal = false;
      } catch (err) {
        console.error('Assignment failed:', err);
        // 这里可以添加错误提示，比如alert或组件提示
      }
    }
  },
  // 额外监听：如果父组件数据更新（比如其他操作修改了数据），自动关闭模态框
  watch: {
    center: {
      deep: true,
      handler() {
        this.showModal = false;
      }
    }
  }
});

2. 调整父组件，传递参数并处理数据刷新 #

父组件需要传递所有中心数据给子组件，同时实现完整的refreshData方法，并监听子组件的刷新事件：

new Vue({
  el: "#root",
  data: {
    centers: []
  },
  created: function () {
    this.refreshData();
  },
  methods: {
    async refreshData() {
      // 替换成你实际的AJAX请求获取最新数据
      // const response = await axios.get('/api/centers');
      // this.centers = response.data;
      
      // 这里用模拟数据示例
      this.centers = [
        { id: 1, name: "Center A", people: ["Alice", "Bob"] },
        { id: 2, name: "Center B", people: ["Charlie", "Diana"] }
      ];
    }
  },
  template: `
    <div>
      <center-view 
        v-for="center in centers" 
        :key="center.id" 
        :center="center" 
        :all-centers="centers"
        @refresh-data="refreshData"
      />
    </div>
  `
});

核心逻辑说明 #

• 打开模态框：点击按钮时记录选中用户，将showModal设为true唤起模态框。
• 分配后主动关闭：用户确认分配后，发送请求完成操作，调用父组件刷新数据的同时，直接关闭模态框。
• 数据更新自动关闭：通过子组件的watch监听center数据变化，当父组件刷新数据后，子组件的center prop更新，自动关闭模态框，确保任何数据变更场景下模态框都会关闭。

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