vue之用v-for循环列出element表单

<el-form-item
    v-for="(item,index) in vcardlist"
    :key="index"
    :label="item.vcardlable"
    :prop="item.vcardprop"
>
<el-input v-model="ruleForm[item.vcardprop]" clearable></el-input>
</el-form-item>

data(){
//验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      if (value) {
        const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (regEmail.test(value)) {
          //合法的邮箱
          return cb();
        }
        cb(new Error("请输入合法的邮箱"));
      }
    };
    //验证手机号码的规则
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (regMobile.test(value)) {
        //合法的手机号码
        return cb();
      }
      cb(new Error("手机号码格式不正确"));
    };
return{
ruleForm: {
        name: "", //名字
        mobile: "", //手机
        email: "", //邮箱
        company: "", //公司
        dep: "", //部门
        job: "", //职位
        address: "", //地址
        note: "", //签名
        imageUrl: "", //头像
      },
      vcardlist: [
        { vcardlable: "姓名", vcardprop: "name" },
        { vcardlable: "手机", vcardprop: "mobile" },
        { vcardlable: "邮箱", vcardprop: "email" },
        { vcardlable: "公司", vcardprop: "company" },
        { vcardlable: "部门", vcardprop: "dep" },
        { vcardlable: "职位", vcardprop: "job" },
        { vcardlable: "地址", vcardprop: "address" },
        { vcardlable: "签名", vcardprop: "note" },
      ],
rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          // { min: 1,  message: "长度大于1个字符", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" },
        ],
        email: [
          // { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
      },
}}