【Vue+ElementUI】表单校验（二）——动态表单项

Element中表单验证的基本方法可参照 官方说明

<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-form-item
    prop="email"
    label="邮箱"
    :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
    <el-button @click="addDomain">新增域名</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        dynamicValidateForm: {
          domains: [{
            value: ''
          }],
          email: ''
        }
      };
    },
    methods: {}
  }
</script>

这是官方的一个例子，例子中包含一个表单，数据结构是：

dynamicValidateForm：{
    email：'', // 基本属性
    domains:[] // 数组
}

"域名"表单项用了一个v-for来动态新增，需要注意的是:prop的值，常见的错误信息是"Error: please transfer a valid prop path to form item!"，例子中使用的是'domains.' + index + '.value'，其实和prop="email"类似，用链式结构表示。

如果 ，数据的结构是

dynamicValidateForm:{}
domains:[]

要整理成以上的结构（如果一定要这样实现），容易有坑！！

<el-form-item
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'域名' + index"
    :key="domain.key"
    :prop="'domains.' + index + '.value'"
    :rules="{
      required: true, message: '域名不能为空', trigger: 'blur'
    }"
  >
  <!-- 选择框-->
  <el-select filterable v-model="domain.value" placeholder="请选择" >
     <el-option
         v-for="item in domain.options"
         :key="item.value"
         :label="item.label"
         :value="item.value" >
      </el-option>
    </el-select>
  </el-form-item>

<script>
  export default {
     data () {
      dynamicValidateForm：{
        email：'', // 基本属性
        domains:[] // 数组
      }
    },
    created () {
      this.id = this.$route.params.id
      // 有ID，则是编辑页面，否则是新增页面
      if(this.id){
        this.getData()
      }
    }，
    methods: {
        getData(){
           getData(this.id).then(res => {
             this.dynamicValidateForm = res.data.dynamicValidateForm 
             this.dynamicValidateForm.domains = res.data.domains
            })
        }
    }
  }
</script>

进入页面后，发现进入编辑页面后，选择框选择后没反应了，页面也没有报错~~~
为什么呢？
找了半天原因，找了<select>的文档，没发现问题 ~~~~~

终于，

this.dynamicValidateForm = res.data.dynamicValidateForm this.dynamicValidateForm.domains = res.data.domains

这两行代码，第一行由于res.data.dynamicValidateForm就是一个object，它并没有domains这个属性，赋值后，dynamicValidateForm 中也没有domains这个属性了。而第二行代码，赋值给domains ，没有报错，可是使用的时候，这个属性却不会生效。而<select>绑定的可是domains 中的值。。

解决方法：

this.$set(this.dynamicValidateForm,'domains ',res.data.domains)

在vue.js中，给对象赋值，最好还是使用$set