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

Posted 2023-02-22

【中文标题】如果满足某些条件，bootstrap-vue 复选框会阻止更改

【英文标题】：bootstrap-vue checkbox prevent change if certain condition is met

【发布时间】：2019-12-03 03:50:15

【问题描述】：

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

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

我有数据属性

data()
    isSelected: false

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

我该怎么做？

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

【参考方案1】：

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

【参考方案2】：

b-form-checkbox 有内部状态是否被检查。它确实与道具同步，但它是通过watch 进行的，因此它只会在道具值更改时更新。在你的情况下，你试图阻止它改变，所以 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 也可以。