Level 58
In your Vue component, you can bind the checkbox to the status property and use a computed property to convert the boolean value to a number. Here's an example:
<template>
<div>
<input type="checkbox" v-model="form.status">
</div>
</template>
<script>
export default {
data() {
return {
form: {
status: 0 // set default value to 0
}
}
},
computed: {
statusNumber() {
return this.form.status ? 1 : 0;
}
},
mounted() {
// set initial value of checkbox based on form.status
this.$refs.checkbox.checked = this.form.status;
}
}
</script>
In this example, we bind the checkbox to form.status using v-model. We also define a computed property statusNumber that converts the boolean value of form.status to a number (0 or 1).
To set the initial value of the checkbox based on form.status, we can use the mounted lifecycle hook to access the checkbox element using $refs and set its checked property to form.status.