vue陣列迴圈表單並進行相應的校驗
阿新 • • 發佈:2021-06-17
廢話不多說,直接上程式碼
<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>
宣告:此部落格為個人學習之用,如與其他作品雷同,純屬巧合,並請明示指出