vue數組循環表單並進行相應的校驗

廢話不多說，直接上代碼

<template>
  <div>
    <div v-for="(item,index) in formData" :key="index">
        <div class="left">
          //划重點：:ref="'item'+index" 
          <el-form :model="item" :rules="rules" :ref="'item'+index" class="nameBox">
            <el-form-item prop="name">
            <el-input type="type" v-model="item.name" />
            </el-form-item>
          </el-form>
        </div>
    </div>
    <el-button type="primary" @click="save">Save</el-button>
  </div>
<template>
<script>
  export default {
    data() {
      return {
       formData: [{name:""}], 
       rules:{
         name:[{message:"請輸入",required: true, trigger: "blur"}]
       }, 
      }
    },
    methods: {
      save() {
        let This = this;
        let allValidate = [];
        this.formData.forEach((item,index) => {
          //有多個輸入框需校驗，待都校驗成功后再進行別的操作，所以需要使用Promise
          allValidate.push(new Promise((rev,rej)=>{
            //划重點：This.$refs['item'+index][0]
            This.$refs['item'+index][0].validate((valid) => {
              if(valid){rev()}else{rej()}
            })
          }))
        });
        Promise.all(allValidate).then(()=>{
          //所有輸入框都校驗成功后的處理  
        }).catch(()=>{});
      },
    }
  }
</script>

聲明：此博客為個人學習之用，如與其他作品雷同，純屬巧合，並請明示指出