How do I set the initial checked value of a checkbox?

[mcarlson64]

I'm trying to create a checkbox for agreeing to some terms, and in some instances I need to set the initial value to be checked. Using a native HTML input checkbox, I can use v-model to control whether or not the checkbox is checked. When using VeeValidate's Field component, using v-model does not change the checked status. Here is some sample code with two checkboxes illustrating the difference. How can I set the initial checked value for a VeeValidate Field checkbox? I've tried binding the checked property to a variable, but that has no effect.

<template>
  <div class="root">
    <Form @submit="onSubmit">

      <!-- this uses regular checkbox input and v-model works to set initial vallue -->
      <p>
        <label for="sponsor_agree">
          <input type="checkbox" name="sponsor_agree" value="true" v-model="sponsor_agree">
          I agree to allow sponsors to contact me. *
        </label>
      </p>

      <!-- this uses VeeValidate Field checkbox input and v-model does not work to set initial value -->
      <p>
        <label for="terms_agree">
          <Field type="checkbox" name="terms_agree" value="true" rules="required" v-model="terms_agree" />
          I have read and agree to the terms. *
        </label>
        <div class="form-errors">
          <ErrorMessage name="terms_agree" as="p" />
        </div>
      </p>

      <button>Submit</button>

    </form>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { Form, Field, ErrorMessage, defineRule } from 'vee-validate'

  defineRule('required', value => {
    if (!value || !value.length) {
      return 'This field is required.';
    }
    return true;
  });

  const terms_agree = ref(true)
  const sponsor_agree = ref(true)

  const onSubmit = (values) => {
    console.log(values);
  }

</script>

[logaretm]

value="true" sets the active value to a string with value "true". Try doing this instead:

:value="true" which will make the field receive the boolean as a checked value.

[mcarlson64]

Thanks so much! I was really struggling to figure this one out.