在Vue中的自定义输入组件的模型/值绑定上缺少所需的属性：&Q；值 [英] Missing required prop: "value" on model/value binding for custom input component in Vue

问题描述

我在尝试在Vue 3(组合API，script setup模式)中创建自定义表单组件时遵循了this guide。

当我加载包含我的组件的页面时，我收到如下的控制台警告：

[Vue warn]：缺少必需的属性：值和值 AT<；SwitchControl Key=0名称=&Quot；问题8；Model=未定义...&>

我的组件(省略css)：

<template>
  <input ref="switchElement"
         v-bind="$attrs"
         class="gui-switch"
         @input="value = !value; emit('update:modelValue', value)"
         type="checkbox"
         role="switch"
         :value="value" />
</template>

<script setup lang="ts">
import { defineEmit, defineProps, onMounted, ref } from "vue"


const props = defineProps<{
  value: boolean | undefined,
}>()

const emit = defineEmit<{
  (e: "update:modelValue", value: boolean | undefined): void,
}>()

const switchElement = ref<HTMLInputElement>()

onMounted(() => switchElement.value!.indeterminate = true)
</script>

包含它的页面是这样使用它的：

<!-- v-for question in questions -->
<switch-control :name="`question-${question.id}`"
             :model="feedbackData[`question-${question.id}`]"
             :id="`question-${question.id}`" />

我尝试了各种方法，例如将发出的事件的名称更改为input，或者使用v-model而不是:model，但我还没有解决这个问题，也不知道还可以尝试什么。

编辑： 编辑组件以使用modelValue，因此：

<template>
  <input ref="switchElement"
         v-bind="$attrs"
         class="gui-switch"
         @input="modelValue = !modelValue; emit('update:modelValue', modelValue)"
         type="checkbox"
         role="switch"
         :value="modelValue" />
</template>

<script setup lang="ts">
import { defineEmit, defineProps, onMounted, ref } from "vue"


const props = defineProps<{
  modelValue: boolean | undefined,
}>()

const emit = defineEmit<{
  (e: "update:modelValue", value: boolean | undefined): void,
}>()

const switchElement = ref<HTMLInputElement>()

onMounted(() => switchElement.value!.indeterminate = true)
</script>

家长：

<!-- v-for question in questions -->
<switch-control :name="`question-${question.id}`"
             v-model="feedbackData[`question-${question.id}`]"
             :id="`question-${question.id}`" />

导致完全错误：

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <SwitchControl key=0 name="question-8" modelValue=undefined  ... > 

Uncaught (in promise) TypeError: invalid 'instanceof' operand type
    assertType runtime-core.esm-bundler.js:1877
    validateProp runtime-core.esm-bundler.js:1841
    validateProps runtime-core.esm-bundler.js:1817
    initProps runtime-core.esm-bundler.js:1548
    setupComponent runtime-core.esm-bundler.js:6500
    mountComponent runtime-core.esm-bundler.js:4206
    processComponent runtime-core.esm-bundler.js:4182
    patch runtime-core.esm-bundler.js:3791
    mountChildren runtime-core.esm-bundler.js:3975

EDIT2： 我设法放大了问题所在，但我仍然不能完全弄清楚发生了什么。

我更改了组件，使@input现在为@input="emit('update:modelValue', !modelValue)"。我将包括包含它的页面的<script>的相关部分：

import SwitchControl from "@/components/SwitchControl.vue"
import type { FeedbackQuestion } from "@/utils/api/story"
import { defineProps, ref } from "vue"


const props = defineProps<{
  questions: {id: number}[],
}>()

const defaultModelValues = {
  // These are hard-coded for debugging, ideally I'd want it to work with an empty initial object
  "question-8": null,
  "question-11": null,
}
const feedbackData = ref<Record<string, any>>(defaultModelValues)

现在症状：

• 当代码类似于上面的代码时，道具和emit被定义为boolean | undefined，我得到以下错误，并且不呈现整个for循环：

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <SwitchControl modelValue=null onUpdate:modelValue=fn<onUpdateModelValue> name="question-8"  ... >

Uncaught (in promise) TypeError: invalid 'instanceof' operand type

• 如果我只是注释道具并发出boolean，元素就会加载，并且我只得到一个警告(见下文)。如果我随后尝试通过单击该元素来更改该值，我会一直收到相同的警告，并且该值根本不会更改，而不是像预期的那样交替使用True和False。如果我检查一下HTML中的value属性，它的行为确实是正确的(最初是，然后在"；True"；和"；False"；之间交替)。

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Boolean, got Null  
  at <SwitchControl modelValue=null onUpdate:modelValue=fn<onUpdateModelValue> name="question-8"  ... >

推荐答案

在子组件中，您应该将value定义为modelValue：

 <input ref="switchElement"
         ...
         :value="modelValue" />
</template>

.....
const props = defineProps<{
  modelValue : boolean | undefined,
}>()

和在父级中使用v-model而不是:model：

  v-model="feedbackData[`question-${question.id}`]"

这篇关于在Vue中的自定义输入组件的模型/值绑定上缺少所需的属性：&Q；值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！