forEach循環(huán)input輸入項目，限制不能為空

image.png

// 數(shù)據(jù)結(jié)構(gòu)
  data() {
    return {
        collapseActiveKey:['0'],
        listCompetitor: [
          {
            Competitor: undefined,
            CompetitorPrice: undefined,
            CompetitorAllocation: undefined,
          }
        ] //競爭對手
      }
    }

// 頁面布局
<el-collapse v-model="collapseActiveKey">
  <el-collapse-item
    v-for="(item, index) in formData.listCompetitor"
    :key="index.toString()"
    :name="index.toString()">
    <template slot="title">
      <div class="detailTitle">
        <div>
          <el-tooltip
            v-if="parseInt(index + 1) == formData.listCompetitor.length" content="添加">
            <i class="el-icon-circle-plus-outline" @click="addCompetitor(index)" />
          </el-tooltip>
          <el-tooltip v-if="formData.listCompetitor.length > 1" content="刪除">
            <i class="el-icon-delete" @click="deleteCompetitor(index)" />
          </el-tooltip>
        </div>
      </div>
    </template>
    <el-row :gutter="15">
      <el-col :span="8">
        <el-form-item class="is-required" label="競爭對手" :prop="'Competitor'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'Competitor'),trigger: 'blur',}]">
          <el-input v-model="item.Competitor" placeholder="請輸入競爭對手" clearable style="width: 100%;">
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item class="is-required" label="對手價格" :prop="'CompetitorPrice'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'CompetitorPrice'),trigger: 'blur',}]">
          <el-input-number controls-position="right" :min="0.01" :step="0.01" v-model="item.CompetitorPrice" placeholder="請輸入對手價格" clearable style="width: 100%;">
          </el-input-number>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item class="is-required" label="對手份額" :prop="'CompetitorAllocation'+index" :rules="[{validator: (a, b, c) =>validateDetailForm(a, b, c, index, 'CompetitorAllocation'),trigger: 'blur',}]">
          <el-input-number controls-position="right" :min="0.01" :step="0.01" v-model="item.CompetitorAllocation" placeholder="請輸入對手份額" clearable style="width: 100%;">
          </el-input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </el-collapse-item>
</el-collapse>

    // 校驗函數(shù)競爭對手的校驗
    validateDetailForm(rule, value, callback, index, name) {
      if (!this.formData.listCompetitor[index][name]) {
        callback(new Error('必填項不能為空！'));
      } else {
        callback();
      }
    },