I'm currently developing a custom component that wraps around a checkbox (similar to what I've done with text and number input types), but I'm facing an issue with binding the passed-in value correctly.
Here's the structure of my component:
<template>
<div class="field">
<label :for="name" class="label">
{{ label }}
</label>
<div class="control">
<input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
</div>
<p v-show="this.hasErrors" class="help has-text-danger">
<ul>
<li v-for="error in errors" :key="error">{{ error }}</li>
</ul>
</p>
</div>
</template>
<script>
export default {
name: 'check-edit',
props: {
value: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
errors: {
type: Array,
default: () => []
}
},
mounted () {
},
computed: {
listeners () {
return {
// Pass all component listeners directly to input
...this.$listeners,
// Override input listener to work with v-model
input: event => this.$emit('input', event.target.value)
}
},
hasErrors () {
return this.errors.length > 0
}
},
}
</script>
I have globally imported this component and used it in another view like this:
<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>
The data model contains the property ShowInCalendar, which is a boolean. In my test case, it is set to true. When I view the page, the checkbox is checked as expected. However, when I interact with the checkbox, the value changes to 'on' and subsequent changes do not reflect on the ShowInCalendar model property.
I came across this example here and attempted to implement a local data property, but it didn't resolve the issue.
In essence, I aim to initialize the checkbox based on the ShowInCalendar property bound via v-model and update the property accordingly when the checkbox state changes. Any advice or suggestions would be greatly appreciated.
Thank you.