FormModel JSX写法,终端会输出异常

[crper]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.6.0

Environment

macos / vue 2.6

Reproduction link

国外的网络太卡,codesandbox各种打不开.
复现代码可以看最后

Steps to reproduce

常规引入,JSX写法..
浏览器控制台就输出异常了.

What is expected?

修正,可以支持jsx写法

What is actually happening?

主要是formmodal的props: model的绑定不支持jsx写法;

<FormModel
model={this.formData}

这种写法就直接控制台报错了,
绑定的校验规则也无法映射到实际的model内的值

其他

Demo.vue

<script>
import { FormModel, Input, Select, Tooltip } from 'ant-design-vue';

export default {
  name: 'StepRecord',
  data() {
    return {
      toolTipPlacement: 'topLeft',
      formData: {
        serviceName: '', // 服务名,同步git repo name
        serviceGroup: undefined, // 服务群组,同步git repo group
        serviceDesc: '', // 服务的描述信息
        serviceType: '', // 边缘服务
        serviceRouterType: '', // 路由类型->k8ssvc
      },
      fieldRules: {
        serviceName: [
          { required: true, message: '请输入服务名字', trigger: 'blur' },
          { min: 4, max: 20, message: '长度在4-20之间', trigger: 'blur' },
        ],
        serviceGroup: [{ required: true, message: '请选择服务群组名', trigger: 'change' }],
        serviceDesc: [{ required: true, message: '请输入此服务的概要描述', trigger: 'blur' }],
      },
      labelCol: { span: 3 },
      wrapperCol: { span: 14 },
      serviceGroupDataList: [
        {
          label: 'h3yun',
          value: 'h3yun',
        },
      ],
    };
  },
  render() {
    return (
      <FormModel
        model={this.formData}
        ref="recordFormRef"
        rules={this.fieldRules}
        labelCol={this.labelCol}
        wrapperCol={this.wrapperCol}
      >
        <FormModel.Item label="服务名" prop="serviceName">
          <Tooltip trigger={['focus']} placement={this.toolTipPlacement}>
            <span slot="title">在技术中台展示的名字,目前同步为仓库名</span>
            <Input vModel={this.formData.serviceName} />
          </Tooltip>
        </FormModel.Item>
        <FormModel.Item label="服务群组" prop="serviceGroup">
          <Tooltip trigger={['focus']} placement={this.toolTipPlacement}>
            <span slot="title">在技术中台所属群组,目前同步为仓库群组</span>
            <Select
              vModel={this.formData.serviceGroup}
              options={this.serviceGroupDataList}
              placeholder="请选择服务群组"
            ></Select>
          </Tooltip>
        </FormModel.Item>
        <FormModel.Item label="服务描述信息" prop="serviceDesc">
          <Tooltip trigger={['focus']} placement={this.toolTipPlacement}>
            <span slot="title">描述你要搞的这个东东是做啥用的!!</span>
            <Input.TextArea
              vModel={this.formData.serviceDesc}
              autoSize={{ minRows: 3, maxRows: 16 }}
              placeholder="你要搞的这个东东面向的领域,用来做啥!!"
            />
          </Tooltip>
        </FormModel.Item>
      </FormModel>
    );
  },
};
</script>

把model={this.formData}去除就没有警告了.
但是这样双向绑定和规则校验就成了摆设..

[sendya]

v-model 不适合写 jsx 语法，请使用 Form 组件写 jsx 语法

[sherlockednguyen]

I've just encountered this issue today and I use solution here to overcome vuejs/jsx-vue2#49 (comment)

Hope this help.

[crper]

@sendya 改成react getFieldDecorator一样的,
主要是model={this.formData}这里出问题.
若是觉得不是缺陷,而是不推荐用在jsx,你们可以在文档里面标注下
我目前全部改成Form控件来写而非FormModel来解决

[sendya]

@crper
我们不推荐用户使用 jsx 最好是直接用 template
当你觉得你需要用 jsx 时，你应当使用专门针对 jsx 语法支持的组件，而不是去用专门提供给 template 的组件。

[erguotou520]

试试 {...{model: this.formData}} ，不行再试试{...{props: {model:this.formData}}}，不过要放在最前面

[guohuihot]

{...{props: {model:this.formData}}}

{...{props: {model:this.formData}}}

这个可以

[bosens-China]

@sendya
我也遇到了这样的问题
在vue3.0和antd最新版本中，我想使用jsx来绑定v-model

  setup() {
    const form = reactive({
      name: '477',
      date: [],
    });
    const list = reactive([
      {
        name: '图片名称',
        slot: <a-input vModel_value={form.name} placeholder="请输入要搜索的图片名称" />,
      },
      {
        name: '日期',
        slot: <a-range-picker vModel_value={form.date} />,
      },
    ]);
    return {
      form,
      list,
    };
  },

这是一个片段，结果提示了错误，请告诉我应该怎么做

[690591397]

@sendya
我也遇到了这样的问题
在vue3.0和antd最新版本中，我想使用jsx来绑定v-model

  setup() {
    const form = reactive({
      name: '477',
      date: [],
    });
    const list = reactive([
      {
        name: '图片名称',
        slot: <a-input vModel_value={form.name} placeholder="请输入要搜索的图片名称" />,
      },
      {
        name: '日期',
        slot: <a-range-picker vModel_value={form.date} />,
      },
    ]);
    return {
      form,
      list,
    };
  },

这是一个片段，结果提示了错误，请告诉我应该怎么做

如果使用的是这个， @vue/babel-plugin-jsx
https://github.com/vuejs/jsx-next/tree/dev/packages/babel-plugin-jsx#readme

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.