在 Vue 3 中，使用 v-model 时的语法稍有不同。如果你希望将表单数据与组件的响应式状态绑定，正确的方式是使用 v-model 属性而不是 v-model:value。请修改你的 <a-input> 代码如下：
<a-input v-model="formState.loanInfoode" />
同时，如果你想在 formState 中初始化 loanInfoode，确保它已定义。可以在 reactive 对象中添加一个初始值，比如：
const formState = reactive({
loanInfoode: '' // 添加这一行来初始化字段
})
所以你的完整代码部分应如下所示：
<template>
<div>
<a-row>
<a-col :span="8">
<a-form-item label="Input">
<a-input v-model="formState.loanInfoode" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item style="margin-left: 40px;">
<a-button
class="margin-right-10"
type="primary"
@click="queryTable"
htmlType="submit"
>
查询
</a-button>
<a-button @click="reset">重置</a-button>
</a-form-item>
</a-col>
</a-row>
</div>
</template>
<script>
import { ref, reactive } from 'vue'
const data = ref([])
const pageSize = ref(5)
const formState = reactive({
loanInfoode: '' // 初始化字段
})
const handlePageSizeChange = (current, size) => {
console.log(`每页条数变化为: ${size}`)
pageSize.value = size
}
const queryTable = () => {
const params = {
draw: 1,
length: 25,
order: [],
search: { regex: false, value: '' },
params: {
customerId: 'A10101',
},
start: 0,
}
CollectionRecord(params)
.then((response) => {
data.value = response.data
})
.catch((error) => {
console.error(`请求失败: ${error}`)
})
}
const reset = () => {
console.log(formState)
}
</script>
这样修改后，就应该不会再报红线了。如果还有其他问题，请告诉我！
内容由零声教学AI助手提供，问题来源于学员提问
