Vue.js 在启动时清除引导对话框绑定数据答案

【问题标题】：Vue.js clear bootstrap dialog bound data on launchVue.js 在启动时清除引导对话框绑定数据
【发布时间】：2019-05-17 14:10:57
【问题描述】：

我有一个引导模式对话框：

<update-dialog id="updateDlg" :items="items" />

点击主页上的按钮即可启动：

<button class="btn btn-danger btn-block"
        data-toggle="modal"
        data-target="#updateDlg">
  Update
</button>

是否可以在每次显示模态时执行一些逻辑？就像某种初始化动作。我只是想清除之前设置的值。

【问题讨论】：

标签： javascript twitter-bootstrap vue.js bootstrap-modal

【解决方案1】：

您是否在 Jquery 中使用 Bootstrap。您可以通过Javascript代码显示模态

<button class="btn btn-danger btn-block"
        @click="showModal">
  Update
</button>

methods: {
  showModal() {
    this.items = ... // do some init actions
    $('#updateDlg').modal('show')
  }
}

另一种解决方案是监听显示模态事件：

$('#updateDlg').on('show.bs.modal', (e) => {
  // do something...
})

【讨论】：

最好让孩子处理，孩子中有数据成员也应该重置。使用此方法无法重置。我需要重新创建子组件，或者能够在其上调用reset() 方法。

【解决方案2】：

我找到的答案是在组件mounted中设置一个事件：

mounted() {
  $('#updateDlg').on('show.bs.modal', (e) => {
    this.reset(); // reset logic here
  });
}

【讨论】：