À propos de la méthode de vérification des éléments de formulaire dans la boucle v-for lorsque vue utilise le composant Element

Cet article présente principalement la méthode de vérification des éléments de formulaire dans la boucle v-for lorsque Vue utilise le composant Element. Je vais le partager avec vous maintenant et le donner comme référence.

La description du titre semble un peu compliquée, avec vue, Element, validation de formulaire et boucle v-for ? N'est-ce pas un peu compliqué ? Cependant, je pense que les étudiants qui ont rencontré ce problème au cours du développement comprendront ce que je veux dire en un coup d'œil.

Tout d'abord, le composant Element dispose d'un ensemble complet de méthodes de vérification de formulaire. Le document officiel est également très clair : API de vérification de formulaire d'élément Ajoutez normalement des règles selon le document officiel. qui doivent être vérifiés, puis soumettez le formulaire. Validez simplement les éléments du formulaire via la méthode de validation du formulaire.

Mais voici la question. S'il y a des éléments de formulaire générés dynamiquement via v-for, comment configurer la validation ? Ce document officiel n'a pas d'explication claire. En recherchant des solutions et en vérifiant réellement, nous avons résumé les solutions comme suit.

Le premier est le code avant de boucler les éléments du formulaire sans vérification :

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

Le premier est d'ajouter des règles, c'est équivaut à ajouter des règles normalement Idem :

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

Ajoutez ensuite une validation aux éléments du formulaire, en prenant comme exemple la quantité de marchandises :

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

Notez que :rules doit être ajouté pour chaque élément du formulaire. S'il y a plusieurs éléments du formulaire, utilisez le formulaire productGroupRules.productGroupNum pour les distinguer, correspondant au. contenu dans productGroupRules ci-dessus.

L'autre élément principal est :prop Notez que l'élément normal du formulaire de vérification est prop, mais le voici :prop.
:prop="'productGroup.'+index+'.num'" est sous forme d'épissage. Le devant est le tableau lié par v-for, le milieu est l'index du tableau et le dernier est le nom du v-modèle lié à l'élément de formulaire, et puis reliez-les avec des points. Il faut garantir que ces trois éléments sont exacts. Même si l’un d’eux se trompe, cela ne peut pas être vérifié.

De plus, il convient de noter que le tableau lié par v-for doit également être lié dans l'objet formulaire. Faites attention aux données ci-dessus :

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

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

<.>

ne peut pas être vérifié, veuillez le noter.

D'accord, ce qui précède est la solution à la vérification des éléments de formulaire dans la boucle v-for lorsque vue utilise le composant Element. J'espère que cela pourra aider les étudiants qui rencontrent ce problème.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser la transition de vue pour terminer la transition glissante

À propos de vue et du formulaire vue-validator fonctions de vérification Mise en œuvre de

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!