Vue3输入组件emit值时触发类型校验警告问题求助

核心错误原因 #

• Pinia State初始化错误
  你的Pinia store中，fields被赋值为getInitialFields（函数本身），而非调用该函数返回的对象。这导致course.fields本质是一个函数，不是预期的包含title属性的对象，因此course.fields.title的值为undefined。
• Input组件的Props约束触发警告
  Input组件的modelValue被定义为必填的String类型，但传入的course.fields.title是undefined，不符合类型要求，触发了Vue的类型检查警告。

修复步骤 #

1. 修正Pinia State的初始化 #

修改Pinia store中state里的fields赋值，调用getInitialFields()函数获取初始对象：

export const useCourseStore = defineStore('course', {
  state: () => ({
    // 将 getInitialFields 改为 getInitialFields()
    fields: getInitialFields(),
    filter: {
      title: '',
    },
    loading: false,
    data: [],
    pagination: {
      currentPage: 0,
      totalPages: 10,
      totalItems: 0,
    }
  }),
  // ... 其余代码
})

2. 可选优化：给Input组件的modelValue添加默认值 #

如果希望Input组件在未传入值时也能正常工作，可调整modelValue的Props定义，添加默认空字符串：

defineProps({
    // ... 其余Props
    modelValue: {
        type: String,
        required: false,
        default: ''
    },
    // ... 其余Props
})

额外规范建议 #

你当前的Input组件直接用v-model="modelValue"修改Props，违反了Vue单向数据流原则（虽禁用了eslint检查），更规范的写法是用本地ref代理：

<template>
    <div class="mb-6">
        <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" :for="id">
            {{ label }} <span class="text-red-600" v-if="isRequired">*</span>
        </label>
        <input :id="id" v-model="localValue" @input="emit('update:modelValue', localValue)" :class="inputClasses" :type="type"
            :placeholder="placeholder">
        <ValidationMessage v-if="validation" :validation="validation" :field="id" />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import ValidationMessage from '@/components/ValidationMessage'

const props = defineProps({/* ... 原Props定义 */})
const emit = defineEmits(['update:modelValue'])

const localValue = ref(props.modelValue)

// 监听Props变化，同步到本地ref
watch(() => props.modelValue, (newVal) => {
    localValue.value = newVal
})
</script>

内容的提问来源于stack exchange，提问作者ASHafizullah