이 글에서는 Vue가 Element 컴포넌트를 사용할 때 v-for 루프에서 양식 항목 확인 방법을 주로 소개합니다. 내용이 꽤 좋아서 지금부터 참고하겠습니다.
제목설명이 좀 복잡해보이네요. vue, Element, formvalidation, v-for 루프가 있죠? 좀 지저분하지 않아? 하지만 개발 과정에서 이런 문제를 접한 학생들은 한 눈에 무슨 뜻인지 이해할 것이라고 믿습니다.
우선 요소 구성요소에는 완전한 양식 확인 방법 세트가 있습니다. 공식 문서도 매우 명확합니다. 일반적으로 필요한 양식 항목에 대한 규칙을 설정합니다. 확인한 다음 양식을 제출할 때 양식 유효성 검사를 통과합니다.
하지만 v-for를 통해 동적으로 생성된 양식 항목이 있는 경우 유효성 검사를 어떻게 설정합니까? 본 공식 문서에는 명확한 설명이 없습니다. 이에 대한 해결 방법을 찾아보고 실제 검증을 통해 해결 방법을 다음과 같이 정리했습니다.
첫 번째는 양식 항목이 확인되기 전에 코드를 반복하는 것입니다.
<template> <p class="content-body"> <el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-row :gutter="10"> <el-col :span="12" :offset="0"> <el-form-item label="套餐名称:" prop="activityName" id="activityName"> <el-input v-model="form.activityName"></el-input> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="12"> <el-form-item label="状态:"> <el-radio v-model="form.status" label="1">上线</el-radio> <el-radio v-model="form.status" label="0">下线</el-radio> </el-form-item> </el-col> </el-row> <el-row :gutter="10"> <el-col :span="2" style="width:120px;"> <p class="sub-title">梯度设置:</p> </el-col> <el-col :span="20"> <el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index"> <el-col :span="6"> <el-form-item label="商品数量:"> <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="优惠价格:"> <el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input> </el-form-item> </el-col> <el-col :span="4"> <i class="el-icon-remove-outline" @click="deleteLadder(index)"></i> <i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i> </el-col> </el-row> </el-col> </el-row> <el-form-item size="medium" class="p-submit"> <el-button @click="resetForm('form')">取消</el-button> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </p> </template> <script> /* eslint-disable */ export default { data() { return { form: { activityName: '', status: '1', productGroup: [{num:"",price:""}] }, rules: { activityName: [ { required: true, message: '请输入套餐名称', trigger: 'blur' } ] } } }, methods: { deleteLadder(index) { if(this.form.productGroup.length>1){ this.form.productGroup.splice(index,1); } }, addLadder() { this.form.productGroup.push({num:"",price:""}); }, submitForm(formName) { console.log("activityName...",this.form.activityName); this.$refs[formName].validate((valid,obj) => { if (valid) { this.submitFormAction(); } else { this.$message.error("验证不通过"); } }); }, submitFormAction() { this.$message.success("提交成功"); }, resetForm(formName) { this.$refs[formName].resetFields(); this.form.productGroup = [{num:"",price:""}]; } } } </script> <style> .el-form-item { margin-bottom: 20px; } </style>
첫 번째는 일반 추가 규칙과 동일한 규칙 규칙을 추가하는 것입니다.
productGroupRules: { productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}], productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}] }
그런 다음 제품에 양식 항목에 확인 추가 수량을 예로 들어보세요.
<el-form-item label="商品数量:" :prop="'productGroup.'+index+'.num'" :rules="productGroupRules.productGroupNum"> <el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input> </el-form-item>
여기서 각 양식 항목에 대해 :rules
를 추가해야 한다는 점에 유의하세요. 위의 productGroupRules
내용에 해당하는 productGroupRules.productGroupNum
형식을 사용합니다. :rules
是每个表单项都要添加,有多个的话用productGroupRules.productGroupNum
这样的形式区分,对应上面productGroupRules
里的内容。
另外主要就是:prop
了,注意正常验证表单项是prop
,而这里是:prop
。:prop="'productGroup.'+index+'.num'"
:prop
입니다. 일반적인 확인 양식 항목은 prop
이지만 여기서는 :prop
입니다. :prop="'productGroup.'+index+'.num'"
는 스플라이싱(splicing) 형태로 되어있습니다. 앞부분이 v-for로 묶인 배열이고, 가운데 부분이 배열 인덱스 인덱스이고, 마지막은 v-model의 이름을 바인딩하는 양식 항목이며 점으로 연결합니다. 이 세 가지 모두 정확하다는 것이 보장되어야 합니다. 하나가 틀려도 검증할 수 없습니다.
또 한 가지 주의할 점은 v-for로 바인딩된 배열도 양식 개체에 바인딩되어야 한다는 것입니다. 위의 데이터는
form: { activityName: '', status: '1', productGroup: [{num:"",price:""}] } 如果是: form: { activityName: '', status: '1' }, productGroup: [{num:"",price:""}]
확인할 수 없습니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
vue의 전환을 사용하여 슬라이딩 전환을 완료하는 방법
vue 및 vue-validator 양식 확인 기능 구현 정보
🎜🎜
위 내용은 vue가 Element 구성 요소를 사용할 때 v-for 루프의 양식 항목 확인 방법 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!