Custom checkbox initial checked state not working

[lebadapetru]

Hey @logaretm,

I've been trying to set the initial checked state to true but with no success and if you could assist me to figure this out, would be great

CustomCheckbox:

  <label class="checkbox">
    <input
      type="checkbox"
      :name="name"
      :checked="checked"
      :value="modelValue"
      :class="styleClasses"
      @change="onChange"
    />
    <span></span>{{ label }}
  </label>
  <div v-if="errorMessage" class="error-message">
    {{ capitalize(errorMessage) }}
  </div>
</template>

<script>
import { useField } from 'vee-validate'
import { watch } from 'vue'
import capitalize from 'lodash/capitalize'

export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    styleClasses: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: undefined
    },
    name: {
      type: String,
      require: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const {
      checked,
      value: checkboxValue,
      errorMessage,
      handleChange,
    } = useField(props.name, props.rules, {
      type: 'checkbox',
      valueProp: props.modelValue,
      //this works if the initial value is true, but if it's false the checkbox will still be checked
      initialValue: props.modelValue, 
    });

    const onChange = (event) => {
      handleChange(event.target.checked)
      emit('update:modelValue', event.target.checked)
    }

    return {
      onChange,
      handleChange,
      errorMessage,
      capitalize,
      checked,
      checkboxValue,
    }
  }
}
</script>

The intended use for this component is for a 'term&conditions' agree check and it can either have the initial value on true or false. I'm setting the value prop because i have a yup boolean validation in the parent form and if i omit it, the default is 'on' which isn't a bool and an error will be triggered. The problem is that setting the initialValue with the modelValue will check the box regardless of its value being false.

[lebadapetru]

I made a few changes which fixed my issue with boolean values but i still got problems with String values when the checkbox's checked state is true on initial load:

<template>
  <label class="checkbox">
    <input
      type="checkbox"
      :name="name"
      :checked="checkboxChecked"
      :value="valueProp" //should i pass useField's value or valueProp?
      :class="styleClasses"
      @change="onChange"
    />
    <span></span>{{ label }}
  </label>
  <div v-if="errorMessage" class="error-message">
    {{ capitalize(errorMessage) }}
  </div>
</template>

<script>
import { useField } from 'vee-validate'
import capitalize from 'lodash/capitalize'

export default {
  props: {
    label: {
      type: String,
      default: ''
    },
    checked: {
      type: Boolean,
      default: false
    },
    value: {
      type: [Boolean, String, Number],
      default: true
    },
    styleClasses: {
      type: String,
      default: ''
    },
    rules: {
      type: Object,
      default: undefined
    },
    name: {
      type: String,
      require: true
    }
  },
  emits: ['update:checked'],
  setup(props, { emit }) {
    const {
      checked: checkboxChecked,
      value: checkboxValue,
      valueProp,
      errorMessage,
      handleChange,
    } = useField(props.name, props.rules, {
      type: 'checkbox',
      valueProp: props.value,
      initialValue: props.checked,
    });

    const onChange = (event) => {
      //initially i passed props.checked/event.target.checked but that didn't changed the useField's checked prop properly
      //not sure what's the right choice
      handleChange(props.value)
      emit('update:checked', event.target.checked)
    }

    return {
      onChange,
      handleChange,
      errorMessage,
      capitalize,
      checkboxChecked,
      checkboxValue,
      valueProp
    }
  }
}
</script>

If the :value is string, it won't check the box on initial load but if i manually change it, the checkboxChecked, checkboxValue have the right value. I left some comms on the above code, whenever you got the time if you can help me out , thank you.

[logaretm]

Hey there, have you tried having unchecked value?

const { ... } = useField(props.name, props.rules, {
 type: 'checkbox',
 valueProp: props.value,
 initialValue: props.checked,
 uncheckedValue: false, //  👈  should be set otherwise it will default to the HTML's "off" value
});

[lebadapetru]

Hey @logaretm , i've set it but the useField's value ( the one i've named checkboxValue ) has undefined value when the checkbox is unchecked. I couldn't find anything in the docs about that uncheckedValue, is there some more info?

[lebadapetru]

I initially tried to create a custom component for both cases: single boolean checkbox and multi select group checkboxes. I managed to make it work with different custom components for each case... seems like they are too different to have a single component

[logaretm]

Could you create a sample for your issue, you can use codesandbox