element表单填写了数据，验证的错误提示仍然不消失

先上代码

<template>
  <el-dialog
    id="palceOrderDialog"
    title="请选择套餐"
    :visible="palceOrderDialog"
    top="5vh"
    :show-close="false"
    center
  >
    <el-main>
      <el-row>
        <el-col :span="24">
          <span class="menu-item-title" title="日期">
            日期: {{ EatDate }}
          </span>
        </el-col>
      </el-row>
      <el-row>
        <el-form
          ref="ruleform"
          //v-model="Zruleform"
          :model="Zruleform"
          :rules="rules"
          size="mini"
        >
          <el-col :span="24">
            <el-form-item label="联系人:" prop="ZuserName">
              <el-input v-model="Zruleform.ZuserName" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="电话:" prop="Zmobile">
              <el-input v-model="Zruleform.Zmobile" />
            </el-form-item>
          </el-col>

          <el-button type="primary" @click="submit('ruleform')" size="mini"
            >提交订单</el-button
          >
        </el-form>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col>
          <ul class="menu">
            <li
              v-for="menu in orderDinner"
              :key="menu.weekFoodID"
              class="menu-item"
            >
              <span class="menu-item-title" :title="menu.name">
                {{ menu.name }}
                <br />
                ￥{{ base.formatCurrency(menu.price) }}
              </span>
              <el-input-number
                v-model="menu.qty"
                size="mini"
                :min="0"
                @change="numberChange(menu)"
              />
            </li>
          </ul>
        </el-col>
      </el-row>

      <br />
      <el-row>
        <el-col :span="24">
          <div class="right">
            <span class="menu-item-title" title="总金额">
              总金额: {{ Money }}
            </span>
          </div>
        </el-col>
      </el-row>
    </el-main>

    <span slot="footer">
      <el-button type="primary" @click="submit('ruleform')" size="mini"
        >提交订单</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: "placeorderdialog",
  props: {
    palceOrderDialog: {
      type: Boolean,
      default: false,
    },
    datasource: {
      type: Array,
      default: null,
    },
    EatDate: {
      type: String,
      default: null,
    },
    phone: {
      type: String,
      default: null,
    },
    name: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      branch: process.env.BRANCH,
      rooturl: process.env.VUE_APP_BASE_API,
      orderDinner: null,
      Zruleform: {
        Zmobile: "123",
        ZuserName: "123",
      },
      rules: {
        Zmobile: [
          {
            required: true,
            message: "Please select Activity zone",
            trigger: "blur",
          },
        ],
        ZuserName: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
      },
      PayOption: [
        {
          value: "内部结算单",
          lable: "内部结算单",
        },
        {
          value: "校园卡",
          lable: "校园卡",
        },
        {
          value: "现金",
          lable: "现金",
        },
      ],
      LY: [
        {
          value: "东2",
          lable: "东2",
        },
      ], //楼宇
      Dy: [
        {
          value: "东院",
          lable: "东院",
        },
        {
          value: "西院",
          lable: "西院",
        },
      ],
    };
  },
  created() {
    //深拷贝父组件对象值
    this.orderDinner = JSON.parse(JSON.stringify(this.datasource));
    // this.ruleform.mobile = this.phone;
    // this.ruleform.userName = this.name;

  },
  computed: {
    Money() {
      let sum = 0;
      this.orderDinner.map((x) => {
        sum += x.price * x.qty;
      });
      return sum;
    },
  },
  methods: {
 
    submit(formName) {
      this.$refs[formName].validate(valid => {
        console.log(valid);
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // this.$emit("onOrderDialogClosed");
      // this.$Message.success("选餐成功！");
    },
  },
};
</script>

问题出在模型绑定的时候下意识在form中使用的是v-model,没有仔细看官网代码，改成:model就行了。。。

参考链接
http://nicethemes.cn/news/txtlist_i41679v.html