El form form verification

problem

Modify options 1 The content in , Still show “ Please enter voting options ”, Invalid verification ：

Code ：

reason

prop Attributes need to be associated with el-input The binding of v-model="item.polloption" Value consistent .

voteForm The data structure is as follows ,

So options input The calibration of shall be maintained options.0.polloption'、options.1.polloption' And so on .

If the modification is not completely consistent , The following code :prop="'options11.' + index + '.polloption'" You will also report mistakes. , Because it shouldn't be options11,

      <el-form-item
        v-for="(item, index) in voteForm.options"
        class="vote-item"
        :prop="'options11.' + index + '.polloption'"
        :label="' Options ' + (index+1) + '：'"
        :key="index"
        :rules="[
          {
     required: true, message: ' Please enter voting options ', trigger: 'blur' }
        ]"
      >

An error is as follows ：

solve

Add

In addition to the Form In addition to passing all the validation rules on the component at one time, you can also pass the validation rules of attributes on a single form field . As shown in the figure above ,el-form You do not need to set :rules="rules", Directly in el-form-item Set in :rules="[ { required: true, message: ' Please enter voting options ', trigger: 'blur' } ]" that will do .

Reference resources ： el-form Add or delete form items dynamically 、async-validator