form表单中绑定变量注意点

最新推荐文章于 2024-09-14 16:16:34 发布

尙无为

最新推荐文章于 2024-09-14 16:16:34 发布

阅读量197

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_27585917/article/details/142106430

版权

1、form表单中绑定变量注意点只能绑定对象或者单个字符或数字，不能绑定数组，否则报错Invalid prop: type check failed for prop "model". Expected Obj

给子组件中传绑定值时，绑定了一个数组对象，导致最终报下方错误，正确的操作是改为传对象进行:mode绑定

2、对对象数组进行rules必填校验时写法注意点，:props中的值是一个变量。

父组件：

<FormQuestionList v-model="formData" :pageType="pageType" ref="FormQuestionList" />
......
data() {
  return {
    formData: {
        baseInfo: {
        supplementList: [
          {
            isHas: 1, // 是否存在
            formNameType: 'my',
            formLabel: this.$t('本人父亲姓名'),
            formName: '张三',
            country: '中国',
            idStyle: '身份证',
            idNo: '123456789012345678'
          },
          {
            isHas: 1, // 是否存在
            formNameType: 'my',
            formLabel: this.$t('本人母亲姓名'),
            formName: '张三',
            country: '中国',
            idStyle: '身份证',
            idNo: '123456789012345678'
          }
        ],
         updatedate: ''
      }
  }
}

子组件： FormManSupList

<template>
  <layout-panel :title="$t('补充信息')" top-level>
    <el-form ref="validateForm" :model="formData.supplementList" :rules="rules" :inline="true" label-position="left"
      label-width="100px" class="form-content p-l-r">
      <div v-for="(item, i) in formData.supplementList" :key="i" class="form-item">
        <el-form-item :label="$t('是否存在')" :prop="'supplementList.' + i + '.isHas'" :rules="rules.isHas">
          <el-select v-model="item.isHas">
            <el-option v-for="oItem in optionHas" :key="oItem.key" :label="oItem.value" :value="oItem.key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="item.formLabel" :prop="'supplementList.' + i + '.formName'" :rules="rules.formName">
          <el-input v-model="item.formName"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </layout-panel>
</template>

......

 props: {
    value: { type: Object, default: () => {} },
    pageType: { type: String, default: 'add' }
  },
  data() {
    return {
      required: true,
      optionHas: [
        {
          key: 1,
          value: this.$t('是')
        },
        {
          key: 0,
          value: this.$t('否')
        }
      ],
      empNationsList: [], // 国家列表
      documentList: [], // 证件类型列表
      rules: {
        isHas: [{ required: true, message: this.$t('请到DHR的个人信息中完善'), trigger: 'blur' }],
        formName: [{ required: true, message: this.$t('请到DHR的个人信息中完善'), trigger: 'blur' }]
      }
      // personList: personList
    }
  },
  computed: {
    formData: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },