vue.js - 更新时关闭模式

Question

这是我的架构：

Vue.component('center-view', {
  props: ["center"],
  template: `
    <ul style="border: 1px black solid">
      <li>Center : {{ center.name }}</li>
      <li v-for="p in center.people">
        {{ p }}
        <button>Affect this user to another center (modal)</button>
      </li>
    </ul>`
});

new Vue({
  el: "#root",
  data: {
    centers: []
  },
  created: function () {
    this.refreshData();
  },
  methods: {
    refreshData: function() {
      // (actually, an ajax request here)
      this.centers = [{
          name: "Paris",
          people: ["Seb", "Eric"]
        },
        {
          name: "NY",
          people: ["Edmond", "Nath"]
        }
      ];
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="root">
      <center-view 
        :center="center"
        v-for="center in centers"
       ></center-view>
</div>

<button>将被模态替换。

这就是我想要的：

1. 默认情况下，模态的状态为“隐藏”，只显示一个按钮
2. 当用户点击该按钮时，模态的状态变为 “可见”并显示整个模态。
3. 用户可以影响到另一个中心的人员并通过单击按钮（在模态中）进行验证，此按钮会发出由 根。

4. 根组件向服务器发出ajax请求以更新影响。

   4.a如果此请求成功，则根组件应用“refreshData”并关闭模式

   4.b否则，模态未显示，并且此模式中显示错误消息。

我坚持步骤4.a / b 。 ：我看到的唯一解决方案是将所有模态的状态放在根组件中。对我来说似乎有些不愉快（根组件不关心模态是否可见）。