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