Single Checkbox shows error even checked is true #3880

min-naing-k · 2022-08-06T15:26:40Z

min-naing-k
Aug 6, 2022

Please anybody helps me,
My problem is that when I submit the form, it shows required error message even accept our terms is true
and when accept our terms is false, it shows error message.
what is wrong with my code?
would u help me?

// parent
<template>
  <Form @submit="handleSubmit">
     <BaseCheckbox
        label="Accept our terms"
        name="acceptOurTerms"
        v-model="form.acceptOurTerms"
        rules="required"
      />
  </Form>
</template>
<script>
import BaseCheckbox from '@/components/Form/BaseCheckbox.vue';
import { Form } from 'vee-validate';

export default {
  components: { BaseCheckbox, Form },
  data() {
    return {
      form: {
        acceptOurTerms: true
      },
    };
  },
  methods: {
    handleSubmit(values) {
      console.log(values);
    },
  },
};
</script>




// BaseCheckbox.vue
<template>
  <div>
    <Field
      :name="name"
      :rules="rules"
      type="checkbox"
      :value="modelValue"
      v-slot="{ field, errorMessage }"
    >
      <div class="flex gap-2">
        <input
          v-bind="field"
          type="checkbox"
          :id="name"
          :checked="modelValue"
          :value="modelValue"
          @change="$emit('update:modelValue', $event.target.checked)"
        />
        <label :for="name" class="text-sm text-white">
          {{ label }} {{ field }}
        </label>
      </div>

      <div v-if="errorMessage" class="text-xs text-red-500 tracking-wide">
        {{ errorMessage }}
      </div>
    </Field>
  </div>
</template>

<script>
import { Field } from 'vee-validate';

export default {
  components: { Field },
  props: {
    modelValue: { type: Boolean },
    label: { type: String },
    name: { type: String, default: 'input' },
    rules: { type: String },
  },
};
</script>