element動態表單驗證prop用法

基於Vue的Element.js的Form組件中，提供了一個動態增減表單的驗證邏輯，這在項目中的提供了很大幫助。
但在實際寫代碼過程當中，會遇到不少的坑，特別是動態添加驗證規則時，prop屬性不知道怎麼用。

一、el-form標籤的model屬性必須是對象，而el-form-item裏的v-model爲非對象。
二、el-form-item的prop的值必須與rules字段名稱保持一致，若是el-form-item是動態添加的，prop則是一個數組或數組對象，具體寫法以下：

<div v-for="(item, index) in courseDetail.chapters" :key="index" class="dialog_section" v-if="item.status">
    <h3>課程詳情：第{{index+1}}節</h3>
    <el-form-item label="課節標題" :prop="'chapters.' + index + '.title'"
        :rules="[{ required: true, message: '請輸入課節標題', trigger: 'blur' },{ min: 1, max: 100, message: '長度在 1 到 100 個字符', trigger: 'blur' }]">
        <el-input v-model="item.title"></el-input>
    </el-form-item>
</div>

好比上面的代碼爲動態添加的表單驗證，注意到prop的寫法::prop="'chapters.' + index + '.title'"

courseDetail.chapters是個數組，若是:prop寫成:prop="'item[' + index + '].title'"是會報錯的。沒有看源碼因此不知道element底層的邏輯是怎麼寫。囧~~