javascript - VueJS: checkbox on change not picking data from given value attribute

Question

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">
  <label>title</label>
  <InputField type="text" name="title" />
</div><!--(name)-->

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

InputField.vue

<template>
  <div>
    <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>
      </label>
    </div>

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

<script>
export default {
    name: "InputField",
    props: [
        'label',
        'type',
        'name',
        'id',
    ],
    data() {
        return {
            value: null
        }
    }
}
</script>

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..?

question from:https://stackoverflow.com/questions/65601180/vuejs-checkbox-on-change-not-picking-data-from-given-value-attribute

Answer 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>
  </label>
</div>

Remove value = yes