vue 使用 script setup 的时候,如何使用and 的 CreateForm?

作者站长头像
站长
· 阅读数 10

https://github.com/creativetimofficial/muse-vue-ant-design-dashboard/blob/main/src/views/Sign-In.vue

vue 使用 script setup 的时候,如何使用and 的 CreateForm?

网上的教程都是使用 this.$form.CreateForm 的方式调用

但是在 vue3 的 <script setup> 里面没有办法使用了 this.$form

所以我该怎么办?


我想知道 this.$form 是怎么来的?


import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import Antd from "ant-design-vue";
// import JsonViewer from "vue-json-viewer";
import TopBar from "@/components/common/TopBar.vue";
import 'ant-design-vue/dist/antd.css';
import './scss/app.scss';
import DefaultLayout from './layouts/Default.vue'


const app = createApp(App).use(router).use(Antd);

app.component("top-bar", TopBar);
app.component("layout-default", DefaultLayout);

app.mount("#app");

为什么我都 .use(Antd) 了,还会报错

Uncaught (in promise) TypeError: this.$form is undefined
    beforeCreate SignIn.vue:69
回复
1个回答
avatar
test
2024-07-01

你使用 script setup 的话应该使用的是 Vue3,相对应的是 AntD Vue 3x,AntD4V 从 2x 开始对 <Form> 组件做了重构不再使用 v-decorator 指令来进行数据绑定了 👉 #组件重构 | 从 v1 到 v2 - Ant Design Vue

不排除说你使用的是 Vue 2.7.xAntD Vue 1.x,那么需要阅读一下 Form 组件的注意事项:

  1. 如果使用 Form.create 处理表单使其具有自动收集数据并校验的功能,建议使用jsx
  2. 如果不是使用 Vue.use(Form) 形式注册的 Form 组件,你需要自行将 $form 挂载到 Vue 原型上。

    • Vue.prototype.$form = Form

但是都使用了 import { createApp } from 'vue' 我不太认为你使用的是 Vue 2.x

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容