在vue app中处理模态window的结果

Question

我正在尝试在我的项目中使用 "Bootstrap + Vue" 中的模态。

现在这可能是一个基本问题，但在搜索了一段时间后我没有找到任何答案所以我会继续问。

考虑以下模态

<b-modal ref="myModalRef"  @ok="handleOk">
    Are You Sure You Want To Delete?
</b-modal>

所以，如果我想处理 ok 按钮，那很简单

export default {
  methods: {
   handleOk: function() {
      alert('alert form table - ok is pressed!!')
    }
  }
}

但是，在我的情况下，我有以下场景，我想知道我的 deleteRow 函数中按下了什么，它知道 person 而不是 handleOk 是 person不可知论者：

deleteRow: function(person){
   //show dialog 
   this.$refs.myModalRef.show()
   // it would be nice to know here what was pressed
    if (okpressed) 
       actuallyDetele(person)
}

换句话说，我正在寻找类似 confirm 的功能，但我想使用模式。

var r = confirm("Are You Sure You Want To Delete?");
if (r == true) {
    // continue 
} else {
   //do nothing 
}

关于如何使用模式实现这一点的任何建议。

谢谢。

Answer 1

当您按确定时，Bootstrap Vue 模态会触发 @ok 事件。您可以像这样使用它：

<b-modal id="deleteModal"
             ref="modal"
             title="Are you sure?"
             @ok="deleteYourUser"
             @shown="anotherFunct">

并且始终预 select 用户并将其保存在数据变量中以在删除功能中使用。您没有其他方法可以将用户传递给模式，如果您确认，您稍后将要删除该用户。

在vue app中处理模态window的结果

Handling the resuts of modal window in vue app

javascript

bootstrap-modal

vuejs2

bootstrap-vue