VueJs中如何实现选中'Later'选项时Buefy复选框默认勾选

解决方案 #

1. 修正BooleanInput组件的属性冲突

Buefy的<b-checkbox>使用v-model时已经内置了选中状态的双向绑定，不需要额外绑定checked属性，避免逻辑冲突。调整组件代码如下：

<template>
  <b-checkbox
    v-model="localValue"
    :name="$props.name">
    {{label}}
  </b-checkbox>
</template>
<script>
import BaseInput from './BaseInput';

export default {
  name: 'BooleanInput',
  mixins: [BaseInput]
};
</script>

这里的localValue是BaseInput混合里封装的和v-model对应的本地变量，直接用它绑定即可，不需要额外定义checked prop。

2. 修正FormField的调用参数

FormField要绑定的复选框值就是你表单里的param.editableByOperator，同时你可以直接根据populationStrategy的取值动态给editableByOperator赋值，不需要单独传checked：

<FormField
  :for="param.editableByOperator"
  :label="null"
  :disabled="param.populationStrategy.value === 'later'" 
  as="Boolean">
</FormField>

3. 修改初始化和状态联动逻辑

你要的效果可以通过两个逻辑点实现：

• 初始化参数的时候根据populationStrategy的初始值设置editableByOperator
• 监听populationStrategy的变化，当值变为later时自动把editableByOperator设为true

首先修改drawMonadParams里的初始化逻辑：

drawMonadParams(monadSlug) {
  const monad = this.ccMonad(monadSlug);
  monad.params.forEach((x, idx) => {
    const populationStrategy = 'now'
    this.addFormFields(['params', idx], {
      value: this.defaultMonadParamValue(x.typeSlug),
      populationStrategy: populationStrategy,
      // 初始化时根据populationStrategy设置editableByOperator
      editableByOperator: populationStrategy === 'later',
      ccRequestParamId: null,
      name: x.name,
      typeSlug: x.typeSlug,
    });
  });
},

然后给param.populationStrategy加一个监听，当它切换为later时自动更新对应editableByOperator的值：

// 在父组件的watch选项里添加
watch: {
  'params': {
    deep: true,
    handler(params) {
      params.forEach(param => {
        if (param.populationStrategy.value === 'later') {
          param.editableByOperator = true
        }
        // 可选：切换回非later状态时改回默认false
        // else {
        //   param.editableByOperator = false
        // }
      })
    }
  }
}

这样不管是初始化还是用户手动切换到"Later"选项，复选框都会自动变成勾选状态，同时因为你给FormField加了disabled属性，此时复选框是禁用状态不可修改，完全符合需求。

内容的提问来源于stack exchange，提问作者cbln