Vue3 UI框架Antd 设置submit但未生效

[jingjingyu1995]

vue和ui框架

vue3、ui框架antd（2.2.8）

问题描述

在VueForm 上设置了submit方法，但未生效

如何复现

<template>
  <VueForm
      v-model="formData"
      :schema="schema"
      :uiSchema="uiSchema"
      :formProps="formProps"
      :formFooter="formFooter"
      @submit="handlerSubmit"
      @form-mounted="handleFormMounted"
  />

</template>

<script>
//  使用
import VueForm from '@lljj/vue3-form-ant';
import {ref} from "vue";

export default {
  name: 'Demo',
  components: {
    VueForm
  },
  setup() {
    const formData = {};
    const schema = ref({});
    const uiSchema = ref({});
    const formProps = ref({});
    const formFooter = ref({});
    schema.value = {
      "title": "标题",
      "type": "object",
      "properties": {
        "id": {
          "title": "Id",
          "type": "string"
        },
        "version": {
          "title": "Version",
          "default": 1,
          "type": "integer"
        },
        "content": {
          "title": "内容",
          "type": "string"
        }
      },
      "required": [
        "content"
      ]
    };
    uiSchema.value = {
      'ui:layout': 'horizontal',
      id: {
        'ui:widget': 'hidden',
      },
      version: {
        'ui:widget': 'hidden',
      },
      content: {
        'ui:widget': 'a-textarea',
      },
    }
    formProps.value = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      layout: 'horizontal',
    };
    formFooter.value = {
      show: true, // 是否显示默认底部
      okBtn: 'Submit', // 确认按钮文字
      okBtnProps: {type: 'primary'}, // 传递确认按钮的 props，例如配置按钮 loading 状态 okBtnProps: { loading: true }
      cancelBtn: 'Cancel', // 取消按钮文字
      formItemAttrs: {
        wrapperCol: {span: 10, offset: 8},
      },
    }

    return {
      formData,
      schema,
      uiSchema,
      formProps,
      formFooter
    }
  },
  methods: {
    handlerSubmit(formData) {
      console.log("submit")
    },
    handleFormMounted() {
      console.log("FormMounted")
    }
  }
}
;

</script>

<style scoped>

</style>

问题描述：点击界面【Submit】按钮，未能进入handlerSubmit 方法中

[lljj-x]

数据校验没通过是不会进入 submit 。

[jingjingyu1995]

数据校验没通过是不会进入 submit 。

哦哦，我试了一下是的。但是有另外一个问题，就是我在输入框内输入了内容，但是他一直提示我“应当有必需属性 content”，查看了一下发现formData中的content 的值为undefined，它没有获取到我的输入内容 是我使用方法不对吗？

[lljj-x]

ref(formData) 使用vue3，建议先看vue3官方文档

[jingjingyu1995]

ref(formData) 使用vue3，建议先看vue3官方文档

嗯嗯，已经使用ref，给您的案例未及时更新，但使用了ref，还是没有获取到我的输入内容

<template>
  <VueForm
      v-model="formData"
      :schema="schema"
      :uiSchema="uiSchema"
      :formProps="formProps"
      :formFooter="formFooter"
      @submit="handlerSubmit"
      @form-mounted="handleFormMounted"
  />

</template>

<script>
//  使用
import VueForm from '@lljj/vue3-form-ant';
import {ref} from "vue";

export default {
  name: 'Demo',
  components: {
    VueForm
  },
  setup() {
    const formData = ref({});
    const schema = ref({});
    const uiSchema = ref({});
    const formProps = ref({});
    const formFooter = ref({});
    schema.value = {
      "title": "标题",
      "type": "object",
      "properties": {
        "id": {
          "title": "Id",
          "type": "string"
        },
        "version": {
          "title": "Version",
          "default": 1,
          "type": "integer"
        },
        "content": {
          "title": "内容",
          "type": "string"
        }
      },
      "required": ["content"]
    };
    uiSchema.value = {
      'ui:layout': 'horizontal',
      id: {
        'ui:widget': 'hidden',
      },
      version: {
        'ui:widget': 'hidden',
      },
      content: {
        'ui:widget': 'a-textarea',
      },
    }
    formProps.value = {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      layout: 'horizontal',
    };
    formFooter.value = {
      show: true, // 是否显示默认底部
      okBtn: 'Submit', // 确认按钮文字
      okBtnProps: {type: 'primary'}, // 传递确认按钮的 props，例如配置按钮 loading 状态 okBtnProps: { loading: true }
      cancelBtn: 'Cancel', // 取消按钮文字
      formItemAttrs: {
        wrapperCol: {span: 10, offset: 8},
      },
    }

    return {
      formData,
      schema,
      uiSchema,
      formProps,
      formFooter
    }
  },
  methods: {
    handlerSubmit(formData) {
      console.log(formData)
    },
    handleFormMounted(formData) {
      console.log(formData)
    }
  }
}
;

</script>

<style scoped>

</style>

[lljj-x]

这个是 antd vue3 v-model不使用 modelValue ，所以无法同步值 。内置的组件都做了转换，自定义的使用如果不是modelValue 需要转换。

'ui:widget': modelValueComponent('a-textarea', {
    model: 'value' // 这里要根据ant组件 model的参数传递
})

详细的原因参见如下，和vue3官方文档关于v-model的升级说明 https://vue-json-schema-form.lljj.me/zh/guide/#vue3-ant-v-model-%E7%89%B9%E6%AE%8A%E5%A4%84%E7%90%86

[jingjingyu1995]

这个是 antd vue3 v-model不使用 modelValue ，所以无法同步值 。内置的组件都做了转换，自定义的使用如果不是modelValue 需要转换。

'ui:widget': modelValueComponent('a-textarea', {
    model: 'value' // 这里要根据ant组件 model的参数传递
})

详细的原因参见如下，和vue3官方文档关于v-model的升级说明 https://vue-json-schema-form.lljj.me/zh/guide/#vue3-ant-v-model-%E7%89%B9%E6%AE%8A%E5%A4%84%E7%90%86

好的。非常感谢