ZBLOG

在 Vue 3 中,使用 v-model 时的语法稍有不同。如果你希望将表单数据与组件的响应式状态绑定,正确的方式是使用 v-model 属性而不是 v-model:value。请修改你的 <a-input> 代码如下:

  1. <a-input v-model="formState.loanInfoode" />

同时,如果你想在 formState 中初始化 loanInfoode,确保它已定义。可以在 reactive 对象中添加一个初始值,比如:

  1. const formState = reactive({
  2. loanInfoode: '' // 添加这一行来初始化字段
  3. })

所以你的完整代码部分应如下所示:

  1. <template>
  2. <div>
  3. <a-row>
  4. <a-col :span="8">
  5. <a-form-item label="Input">
  6. <a-input v-model="formState.loanInfoode" />
  7. </a-form-item>
  8. </a-col>
  9. <a-col :span="8">
  10. <a-form-item style="margin-left: 40px;">
  11. <a-button
  12. class="margin-right-10"
  13. type="primary"
  14. @click="queryTable"
  15. htmlType="submit"
  16. >
  17. 查询
  18. </a-button>
  19. <a-button @click="reset">重置</a-button>
  20. </a-form-item>
  21. </a-col>
  22. </a-row>
  23. </div>
  24. </template>
  25. <script>
  26. import { ref, reactive } from 'vue'
  27. const data = ref([])
  28. const pageSize = ref(5)
  29. const formState = reactive({
  30. loanInfoode: '' // 初始化字段
  31. })
  32. const handlePageSizeChange = (current, size) => {
  33. console.log(`每页条数变化为: ${size}`)
  34. pageSize.value = size
  35. }
  36. const queryTable = () => {
  37. const params = {
  38. draw: 1,
  39. length: 25,
  40. order: [],
  41. search: { regex: false, value: '' },
  42. params: {
  43. customerId: 'A10101',
  44. },
  45. start: 0,
  46. }
  47. CollectionRecord(params)
  48. .then((response) => {
  49. data.value = response.data
  50. })
  51. .catch((error) => {
  52. console.error(`请求失败: ${error}`)
  53. })
  54. }
  55. const reset = () => {
  56. console.log(formState)
  57. }
  58. </script>

这样修改后,就应该不会再报红线了。如果还有其他问题,请告诉我!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19395

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?