Vue+ ElementUI動態表單驗證

最近遇到個需求，動態表單，可以通過按鈕增加表單項，大體是這樣的：

代碼如下：

 <div class="operate">
        <span>報文過濾</span>
        <div class="operate-right">
          <div class="operate-btn">
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-plus"
              @click.prevent="addExp()"
            >新增過濾條件</el-button>
            <el-button
              size="medium"
              type="primary"
              icon="el-icon-folder-checked"
              @click.prevent="testExp"
            >報文過濾測試</el-button>
          </div>
          <div class="exp">
            <el-form-item label="報文操作" prop="operate">
              <el-select v-model="form.operate" clearable placeholder="請選擇方式" class="filter-item">
                <el-option v-for="item in tablelList" :key="item" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <template v-for="(item, index) in form.expItem">
              <el-form-item
                label="正則表達式"
                :prop="'expItem.' + index +'.exp'"
                :key="index"
                :rules="{required: true, message: '請輸入表達式', trigger: 'blur'}"
              >
                <el-input v-model="item.exp" style="width: 370px;" />
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="removeExp(item,index)"
                >刪除</el-button>
              </el-form-item>
            </template>
          </div>
        </div>
      </div>

js部分：

  addExp() {
     this.form.expItem.push({
          exp: null
        });
    },
    removeExp(item, index) {
      if (this.form.expItem.length <= 1) {
        this.$notify({
          title: '警告',
          message: '至少填寫一條',
          type: 'warning'
        });
        return;
      }
      this.form.expItem.splice(index, 1);
    },

遇到的問題

邏輯還是很好實現的，就是通過循環一個表單數組，動態向數組添加或者刪除項，但是在驗證表單項的時候卻遇到個問題，直接寫:prop="expItem"時，雖然有必填的*號，但是並未做驗證，搜索一圈后發現這里的:prop綁定的有問題，這里應該寫成:prop="'v-for綁定的數組.' + index + '.v-model綁定的變量'" , 我這里就是:prop="'expItem.' + index +'.exp'" ， 這樣就做到了每一項都做到了驗證