Toggle as Checkbox in Vue (InertiaJS) / Tailwind always submits "true"-CodePudding

I have a toggle checkbox component built in Vue (IneriaJS) / Tailwind, when ever I submit the form the value is always true.

Here is the code for the component:

<template>
  <div >
    <label v-if="label" >{{ label }} - this is {{ checked }}</label>
    <input type="checkbox"  :value="checked" :v-model="checked" :checked="checked" @change="onChange" :id="id"/>
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid'
export default {
  props: {
    id: {
      default() {
        return `checkbox-${uuid()}`
      },
    },
    active: Boolean,
    error: String,
    label: String,
    checked: Boolean,
  },
  data() {
    return {
      checked: this.active
    }
  },
  methods: {
    onChange() {
      this.checked = !this.checked;
      this.$emit('input', this.checked);
    }
  },
}
</script>

And is called:


<Checkbox label="Active" :active="active" />

<script>
import Checkbox from '@/components/Checkbox/Checkbox'


export default {
  components: {
    Checkbox,
  },
  props: {
    user: Object,
    active: Boolean,
  },
  data() {
    return {
        active: this.user.active == 0 ? false : true,
    }
  },

</script>

When toggling the checked value is being updated but whenever I submit the form the value submitted is always "true" please can anyone advise.

Thanks

CodePudding user response：

You do nothing with your emit. Put an @input="yourCheckboxVariable = $event" to your <Checkbox ... /> and do something with the variable. ;)