bootstrap-vue 复选框在满足特定条件时阻止更改

Question

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

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

我有数据属性

data(){
    isSelected: false
}

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

我该怎么做？

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

Answer 1

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

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

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

下面的示例使用 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 也可以。

Answer 2

我终于用@click.native.prevent

实现了

bootstrap-vue 复选框在满足特定条件时阻止更改

bootstrap-vue checkbox prevent change if certain condition is met

vue.js

bootstrap-vue