vuejs / jsx-vue2

monorepo for Babel / Vue JSX related packages
https://jsx-vue2-playground.netlify.app/
1.47k stars 96 forks source link

Form Component with model props throws error #265

Open shishiyong opened 2 years ago

shishiyong commented 2 years ago

vue : 3.0.0 element-plus:1.0.2

code:

function renderFrom(h) {

const { formConfCopy } = this;
return (
  <el-row gutter={formConfCopy.gutter}>
    <el-form
      size={formConfCopy.size}
      label-position={formConfCopy.labelPosition}
      disabled={formConfCopy.disabled}
      label-width={`${formConfCopy.labelWidth}px`}
      ref={formConfCopy.formRef}
      props={{ model: this[formConfCopy.formModel] }}
      rules={this[formConfCopy.formRules]}
    >
      {renderFormItem.call(this, h, formConfCopy.fields)}
      {formConfCopy.formBtns && formBtns.call(this, h)}
    </el-form>
  </el-row>
);

}

props={{ model: this[formConfCopy.formModel] }} It doesn't work

just warning [Element Warn][Form]model is required for validate to work!

ding-js commented 2 years ago

It seems that you should set props by spread operator like this

<el-form
  {...{
    props: {
      model: this[formConfCopy.formModel],
    },
  }}
>
  ...
</el-form>