mercredi 6 janvier 2021

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

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




Aucun commentaire:

Enregistrer un commentaire