Vue.js表单验证所需文件

Question

我有一个必填字段。尽管必填字段已满，但出现错误：“此字段为必填字段。”

http://element.eleme.io/#/en-US/component/form

我利用了该页面。保存时显示为空。我该怎么解决？

{ad：[“此字段为必填。”]，大豆：[“此字段为必填。”]，…}

代码：

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="AD:" prop="ad" style="margin-left: 75px">
          <el-input v-model="form.ad" placeholder="Adınızı giriniz." style="width: 75%" class="text-center"/>
        </el-form-item>
        <el-form-item label="Soyad:" prop="soyad" style="margin-left: 75px">
          <el-input v-model="form.soyad" placeholder="Soyadınızı giriniz." style="width: 75%"/>
        </el-form-item>
        <el-form-item label="Cinsiyet:" prop="cinsiyet" style="margin-left: 75px">
          <el-radio-group v-model="form.cinsiyet">
            <el-radio label="Kadın"/>
            <el-radio label="Erkek"/>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="Adres:" prop="adres" style="margin-left: 75px">
          <el-input v-model="form.adres" placeholder="Adres giriniz." style="width: 75%"/>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="submitForm('form')">Ekle</el-button>
        </el-form-item>
      </el-form>
   </div>
</template>

<script>
export default {
 data() {
  return {
   form: {
    ad: '',
    soyad: '',
    cinsiyet: '',
    adres: ''
    },
  rules: {
    ad: [
      { required: true, message: 'zorunlu', trigger: 'blur' }
    ],
    soyad: [
      { required: true, message: 'zorunlu', trigger: 'blur' }
    ],
    cinsiyet: [
      { required: true, message: 'zorunlu', trigger: 'change' }
    ],
    adres: [
      { required: true, message: 'zorunlu', trigger: 'blur' }
    ],
  }
 }
},
methods: {
 submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      createArticle(this.form).then(() => {
        this.$notify({
          title: 'Ekleme',
          message: 'Başarılı bir şekilde eklendi.',
          type: 'success',
          duration: 2000
        })
      })
    }
  })
 }
}
</script>