VueJS：更改复选框不从给定值属性中选择数据

Question

我正在使用 laravel 7.x 开发我的第一个 Vue Js 应用程序。

我有一个搜索表单，用户可以在其中输入关键字并通过选中复选框选择作为字符串搜索或作为关键字搜索。

<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">{{ label }}</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>

签入Vue Devtools 时，checkbox 仅捕获布尔值，而不是value (Yes) 属性中给出的值。

我在这里做错了什么..？

Answer 1

InputField 组件中的默认值是一个字符串。

<div v-if="type == 'checkbox' || type == 'radio'" class="checkables">
  <label class="label">
    <input :type="type" :name="name" :id="id" v-model="value" />
    <span v-if="label" class="ml-1">{{ label }}</span>
  </label>
</div>

移除值 = 是