Solution 1 :

Your default value inside the InputField component is a string.

<div v-if="type == 'checkbox' || type == 'radio'" class="checkables">
  <label class="label">
    <input :type="type" :name="name" :id="id" v-model="value" />
    <span v-if="label" class="ml-1">{{ label }}</span>

Remove value = yes

Problem :

I am working on my first Vue Js application with laravel 7.x.

I have a search form where user can enter the keyword(s) and choose to search as a string or search as keyword(s) by selecting the checkbox.

<div class="col-lg-4 col-md-12 col-sm-6 form-group">
  <InputField type="text" name="title" />

<div class="col-lg-1 col-md-12 col-sm-6 form-group">
  <InputField type="checkbox" name="match" label="Exact" />


    <div v-if="type == 'checkbox' || type == 'radio'" class="checkables">
      <label class="label">
        <input :type="type" :name="name" :id="id" v-model="value" value="Yes" />
        <span v-if="label" class="ml-1">{{ label }}</span>

    <input v-else :type="type" :name="name" :id="id" class="form-control" v-model="value" />

export default {
    name: "InputField",
    props: [
    data() {
        return {
            value: null

When checking in Vue Devtools the checkbox is only catching boolean value instead of the value given in the value (Yes) attribute.

What am I doing wrong here..?


Comment posted by Amaarockz

Remove value=’yes’ fron the input tag

Comment posted by Mr.Singh

Then how will I get the

Comment posted by TheMo

You check for the value given to the v-model “value”