如果满足某些条件，bootstrap-vue 复选框会阻止更改

Question

我正在使用 bootstrap-vue 包并有一个复选框，如下所示：

<b-form-checkbox v-model="isSelected"switch></b-form-checkbox>

我有数据属性

data(){
    isSelected: false
}

我想要做的是让用户单击复选框，然后在更改选中的值之前通过调用方法执行某种验证。该方法然后可以防止值被改变。

我怎样才能做到这一点？

我试图将方法绑定到@change 事件，但是当我尝试设置this.isSelected = false复选框值时仍然被选中。

Answer 1

我终于实现了它使用 @click.native.prevent

Answer 2

b-form-checkbox具有是否被检查的内部状态。它确实与 prop 同步，但它是通过 a 同步的，watch因此它只会在 prop 值更改时更新。在你的情况下，你试图阻止它改变，所以watch不会触发。

您可能需要考虑禁用该复选框。

要使其在不禁用复选框的情况下工作，您需要确保watch触发该复选框。为此，我们需要让原始的更改发生，允许它更新 prop，然后将其更改回我们想要的值。

下面的示例使用async/await但如果您愿意，您可以使用传递给的回调来完成$nextTick。

new Vue({
  el: '#app',
  
  data () {
    return {
      isSelected: false
    }
  },
  
  methods: {
    async onInput () {
      await this.$nextTick()
      this.isSelected = false
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.27/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-form-checkbox v-model="isSelected" @input="onInput"></b-form-checkbox>
</div>

我已经使用过该input事件，但change也可以。