How to make a checkbox selected by default in VueJs?

Question

EDIT: My problem has shifted somewhat, with a different code focus, so I created a new question.

I have a Beufy Form Field Component, with a Boolean Input Checkbox inside, this Form Field Component allows you to select the option "Later" and this disables the Form Field and Checkbox. I would like to have it so that when "Later" is selected, the Boolean Input Checkbox is ticked/enabled by default.

I've read the Buefy checkbox documentation and I can see that I should use

<b-checkbox :value="true"

but when I attempt add it to my FormField template (the checkbox is a child component of the Form Field component) call it throws errors, this is how the template is rendered:

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

How do I best implement this fix? I'll attach the Checkbox Component

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>

edit:

In my component I have found these methods, which set the checkbox as unticked by default. Is there something I can do here which would set the checkbox(editableByOperator) to True when 'Later'(populationStrategy) is set to 'Later.

Methods:

 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 : '';
},

It is the same as with HTML. Use a checked attribute. Input Checkbox checked by default — Peter Pointer
– Peter Pointer, Commented Oct 29, 2021 at 9:38
@PeterKrebs Thanks for the answer, however even defaulting it as true doesn't work, no errors but the checkbox remains empty, I've updated the code to reflect. — cbln
– cbln, Commented Oct 29, 2021 at 10:35
May be try not using the checked prop inside the template . Try a data variable and use that instead. like this <b-checkbox :checked="checkValue"></b-checkbox> data(){ return{ checkValue : this.checked } } — Akash NO
– Akash NO, Commented Oct 29, 2021 at 10:54

Akash NO · Accepted Answer · 2021-10-30 13:17:32Z

0

May be try not using the checked prop inside the template . Try a data variable and use that instead.

like this

    <b-checkbox :checked="checkValue"></b-checkbox>
    props(){
      checked:{
         type:Boolean,
         default:true
    }
    data(){
        return{
          checkValue : this.checked
       }
       
    }

edited Oct 30, 2021 at 13:17

answered Oct 29, 2021 at 10:59

Akash NO

3264 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cbln Over a year ago

Thanks for the answer, I've implemented it but I'm not sure how I should reference it in my code so that it is by default checked, because currently the boxes remain unchecked.

Akash NO Over a year ago

put the default value true inside props(), i have updated the code

Collectives™ on Stack Overflow

How to make a checkbox selected by default in VueJs?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related