vue.js清除启动时的bootstrap对话框绑定数据

Question

我有一个bootstrap模态对话框：

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

单击主页上的按钮：

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

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

Answer 1

您是否使用bootstrap和jquery。您可以通过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...
})

Answer 2

我发现的答案是在组件中设置事件mounted：

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