0

编辑：我的问题发生了一些变化，代码重点不同，所以我创建了一个新问题。

我有一个 Beufy 表单域组件，里面有一个布尔输入复选框，这个表单域组件允许您选择“稍后”选项，这会禁用表单域和复选框。我想要它，以便在选择“稍后”时，默认情况下勾选/启用布尔输入复选框。

我已经阅读了 Buefy复选框文档，我可以看到我应该使用

<b-checkbox :value="true"

但是当我尝试将它添加到我的 FormField 模板（复选框是 Form Field 组件的子组件）时，调用它会引发错误，这就是模板的呈现方式：

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

如何最好地实施此修复？我将附加复选框组件

Below:

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

export default {
  name: 'BooleanInput',
  mixins: [BaseInput],

  props: {
    checked: {
      type: Boolean,
      default: true,
    },
  }
};

</script>

编辑：

在我的组件中，我找到了这些方法，默认情况下将复选框设置为未选中。当'Later'(populationStrategy) 设置为'Later.

方法：

 drawMonadParams(monadSlug) {
  const monad = this.ccMonad(monadSlug);
  monad.params.forEach((x, idx) => {
    this.addFormFields(['params', idx], {
      value: this.defaultMonadParamValue(x.typeSlug),
      populationStrategy: 'now',
      editableByOperator: false,
      ccRequestParamId: null,
      name: x.name,
      typeSlug: x.typeSlug,
    });
  });
},

defaultMonadParamValue(typeSlug) {
  return typeSlug === 'boolean' ? false : '';
},
4

1 回答 1

0

可以尝试不使用模板内的选中道具。尝试使用数据变量并改用它。

像这样

    <b-checkbox :checked="checkValue"></b-checkbox>
    props(){
      checked:{
         type:Boolean,
         default:true
    }
    data(){
        return{
          checkValue : this.checked
       }
       
    }
于 2021-10-29T10:59:51.067 回答