찾다

집 >웹 프론트엔드 >JS 튜토리얼 >vue가 Element 구성 요소를 사용할 때 v-for 루프의 양식 항목 확인 방법 정보

vue가 Element 구성 요소를 사용할 때 v-for 루프의 양식 항목 확인 방법 정보

不言
不言원래의
2018-06-29 11:17:503453검색

이 글에서는 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(&#39;form&#39;)">取消</el-button>
    <el-button type="primary" @click="submitForm(&#39;form&#39;)">提交</el-button>
   </el-form-item>
  </el-form>
 </p>
</template>
<script>
/* eslint-disable */
export default {
 data() {
  return {
   form: {
    activityName: &#39;&#39;,
    status: &#39;1&#39;,
    productGroup: [{num:"",price:""}]
   },
   rules: {
    activityName: [
     { required: true, message: &#39;请输入套餐名称&#39;, trigger: &#39;blur&#39; }
    ]
   }
  }
 },
 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: &#39;请填写商品数量&#39;, trigger: &#39;blur&#39;}],
 productGroupPrice: [{required: true, message: &#39;请填写优惠价格&#39;, trigger: &#39;blur&#39;}]
}

그런 다음 제품에 양식 항목에 확인 추가 수량을 예로 들어보세요. 

<el-form-item label="商品数量:" :prop="&#39;productGroup.&#39;+index+&#39;.num&#39;" :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: &#39;&#39;,
 status: &#39;1&#39;,
 productGroup: [{num:"",price:""}]
}
如果是：

form: {
 activityName: &#39;&#39;,
 status: &#39;1&#39;
},
productGroup: [{num:"",price:""}]

확인할 수 없습니다.

그렇습니다. 위의 내용은 vue가 Element 구성 요소를 사용할 때 v-for 루프에서 양식 항목 확인에 대한 솔루션입니다. 이 문제가 발생하는 학생들에게 도움이 되기를 바랍니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:
vue의 전환을 사용하여 슬라이딩 전환을 완료하는 방법


vue 및 vue-validator 양식 확인 기능 구현 정보

🎜🎜

위 내용은 vue가 Element 구성 요소를 사용할 때 v-for 루프의 양식 항목 확인 방법 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery 계층적 선택기다음 기사：jquery 계층적 선택기

관련 기사

더보기