Informationen zur Überprüfungsmethode für Formularelemente in der V-for-Schleife, wenn Vue die Elementkomponente verwendet

In diesem Artikel wird hauptsächlich die Methode zur Überprüfung von Formularelementen in der V-For-Schleife vorgestellt. Der Inhalt ist jetzt recht gut und dient als Referenz.

Die Titelbeschreibung sieht etwas kompliziert aus, mit Vue, Element, Formularvalidierung und V-for-Schleife? Ist es nicht ein bisschen chaotisch? Ich glaube jedoch, dass Studierende, die während der Entwicklung auf dieses Problem gestoßen sind, auf einen Blick verstehen werden, was ich meine.

Zuallererst verfügt die Element-Komponente über einen vollständigen Satz von Formularüberprüfungsmethoden. Das offizielle Dokument enthält außerdem Regeln für die Formularüberprüfung die überprüft werden müssen, und dann das Formular absenden. Validieren Sie einfach die Formularelemente mit der Validierungsmethode des Formulars.

Aber hier stellt sich die Frage, wie die Validierung eingerichtet wird, wenn Formularelemente dynamisch durch v-for generiert werden. Dieses offizielle Dokument enthält keine klare Erklärung. Durch die Suche nach Lösungen und die tatsächliche Überprüfung haben wir die Lösungen wie folgt zusammengefasst.

Der erste ist der Code vor dem Schleifen der Formularelemente ohne Überprüfung:

<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>

Der erste besteht darin, Regeln hinzuzufügen, was dasselbe ist wie Fügen Sie normalerweise Regeln hinzu:

productGroupRules: {
 productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
 productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]
}

Fügen Sie dann eine Validierung zum Formularelement hinzu, indem Sie die Warenmenge als Beispiel nehmen:

<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>

Beachten Sie hier, dass :rules für jedes Formularelement hinzugefügt werden muss. Wenn mehrere Formularelemente vorhanden sind, verwenden Sie das Formular productGroupRules.productGroupNum, um sie entsprechend dem Inhalt in productGroupRules oben zu unterscheiden.

Die andere wichtige Sache ist :prop. Beachten Sie, dass das normale Verifizierungsformularelement prop ist, aber hier ist es :prop.
:prop="'productGroup.'+index+'.num'" ist in Form von Spleißen. Die Vorderseite ist das durch v-for gebundene Array, die Mitte ist der Array-Indexindex und die letzte ist der Name des an das Formularelement gebundenen V-Modells Dann verbinde sie mit Punkten. Es muss garantiert sein, dass alle drei Angaben korrekt sind, und selbst eine falsche Angabe kann nicht überprüft werden.

Außerdem ist zu beachten, dass das an v-for gebundene Array auch an das Formularobjekt gebunden sein muss:

form: {
 activityName: '',
 status: '1',
 productGroup: [{num:"",price:""}]
}
如果是：

form: {
 activityName: '',
 status: '1'
},
productGroup: [{num:"",price:""}]

kann nicht verifiziert werden, bitte beachten Sie dies.

Okay, das Obige ist die Lösung für die Formularelementüberprüfung in der V-For-Schleife, wenn Vue die Element-Komponente verwendet. Ich hoffe, es kann Schülern helfen, die auf dieses Problem stoßen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie den Vue-Übergang, um den gleitenden Übergang abzuschließen

Über Vue und das Vue-Validator-Formular Verifizierungsfunktionen Implementierung von

Das obige ist der detaillierte Inhalt vonInformationen zur Überprüfungsmethode für Formularelemente in der V-for-Schleife, wenn Vue die Elementkomponente verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!