通过 vue-bootstrap 中的复选框打开模式？

Question

我想在 vue-bootstrap.

中打开一个复选框检查模式

我有一个复选框，我不确定这是否是正确的方法，但我也需要它有一个 v-model。

 <b-form-checkbox
    id="checkbox-1"
    v-model="healthDocument"
    name="checkbox-1"
    value="accepted"
    unchecked-value="not_accepted"
  >
    Health Documents
  </b-form-checkbox>

和模态

<div>
  <b-button v-b-modal.modal-1>Launch demo modal</b-button>

  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

Answer 1

我看到两种我认为同样可行的方法：

1：从复选框处理程序

调用模态实例方法show(id)

我认为最简单的方法是调用 this.$bvModal.show(_id_) 函数从复选框的 change 事件中显示您的模式：

<b-form-checkbox
  id="checkbox-1"
  v-model="healthDocument"
  name="checkbox-1"
  value="accepted"
  unchecked-value="not_accepted"
  @change="$bvModal.show('modal-1')"
>
  Health Documents
</b-form-checkbox>

<div>
  <b-modal 
    id="modal-1"
    title="BootstrapVue"
  >
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

这种方法意味着您的模式的可见性与复选框状态不同步，但当您单击复选框时它仍会打开。如果您希望模式仅在复选框从 unchecked 变为选中时打开，那么您需要向处理程序添加一个条件，以便它仅在您选中复选框：

checkHandler(checked) {
  if (checked == 'accepted')
    this.$bvModal.show('modal-1');
},

2：将模态状态绑定到复选框状态

我最初建议使用模式的 v-model directive，但复选框状态有点古怪，因为它不一定存储 true/ false——它实际上会存储任何内容你给它的价值，因为它是“检查”的价值。在您的例子中，这是字符串“accepted”。

因此，我建议使用 underpins Bootstrap-Vue's modal's v-model directive 的 属性 代替 v-model：visible。

这样，模态框将与复选框的选中状态同步，当复选框被选中时，模态框将打开，而当复选框未选中时，模态框将关闭。如果您希望复选框直接控制模式，这是有意义的。

这也意味着要关闭模式，我们需要以编程方式取消选中该复选框（根据您的用例，这可能是合意的，也可能不是合意的）。这是完整的代码示例：

<b-form-checkbox
  id="checkbox-1"
  v-model="healthDocument"
  name="checkbox-1"
  value="accepted"
  unchecked-value="not_accepted"
>
  Health Documents
</b-form-checkbox>

<div>
  <b-modal 
    id="modal-1"
    title="BootstrapVue"
    :visible="healthDocument == 'accepted'"
    @hide="healthDocument = 'not_accepted'"
  >
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>