-Go服务器开发

在你提供的 Vue 3 代码中，红线问题很可能是由于 formState.loanInfoode 在 formState 对象中没有定义。这会导致 Vue 的响应式系统无法找到该属性，从而引发错误。

为了解决这个问题，你需要在 formState 中定义 loanInfoode 属性。你可以这样修改你的代码：

const formState = reactive({
  loanInfoode: '' // 添加这一行来定义该属性
})

完整的代码示例：

<template>
  <div>
    <a-row>
      <a-col :span="8">
        <a-form-item label="Input">
          <a-input v-model:value="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: '' // 定义 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)
}
export default {
  setup() {
    return { data, pageSize, formState, queryTable, reset }
  }
}
</script>