在VUE（inertiajs） / tailwind中的复选框切换为“ true”始终提交。

Question

我有一个内置在VUE（Ineriajs） /尾风中的切换复选框组件，每当我提交表单时，值始终是正确的。

这是组件的代码：

<template>
  <div class="form-check form-switch mt-5 form-inline first:mt-0">
    <label v-if="label" class="form-label sm:w-20">{{ label }} - this is {{ checked }}</label>
    <input type="checkbox" class="form-check-input mr-0 ml-3" :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>

并称为：

<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>

切换时，正在更新检查值时，但是每当我提交表格时，提交的值始终是“ true”的，请任何人建议。

谢谢

Answer 1

您对发射什么都不做。将@input =“ yourcheckboxvariable = $ event”放在您的＆lt;复选框.../＆gt;中，并用变量做点事。 ）