項目中使用element的表單作為查詢篩選條件自赔,表單是通過v-for循環(huán)生成的妈嘹,數(shù)據綁定實現(xiàn)了,但是無法添加驗證绍妨,也無法重置
下面是報錯信息
Error in mounted hook: "Error: please transfer a valid prop path to form item!
由于我的數(shù)據是通過vm.$set()方式注入的润脸,所以在mounted鉤子中提示這個錯誤
剛開始我的寫法是這樣的柬脸,給prop綁定columnValue,不報錯但是無法實現(xiàn)重置毙驯、驗證
element官網
5304.png
<el-row >
<el-col
v-for="(col,index) in form.formListArr"
:key="col.id"
>
<el-form-item :label="col.columnRemarks" prop="'columnValue'">
<el-input v-onlyNumber v-model="col.columnValue"></el-input>
</el-form-item>
</el-col>
</el-row>
翻了很多資料發(fā)現(xiàn)很多種寫法肖粮,但是大部分都是將form中的el-form-item全寫一遍,后面跟上對應的屬性尔苦,這樣就和我的動態(tài)渲染,只有一個el-form-item去做循環(huán)遍歷就相違背了
200.png
上面的寫法雖然無法實現(xiàn)我的功能行施,但是也給我一定的啟發(fā)允坚,我前面直接綁定一個值給prop無法實現(xiàn),那我用這種方法去做一些修改是否可以實現(xiàn)了蛾号?
下面將我的修改后代碼貼出來
<el-row>
<el-col
v-for="(col,index) in form.formListArr"
:key="col.id"
>
<el-form-item :label="col.columnRemarks" :prop="'formListArr.' + index +'.columnValue'">
<el-input v-onlyNumber v-model="col.columnValue"></el-input>
</el-form-item>
</el-col>
</el-row>
注意點:循環(huán)數(shù)據一定要使用el-form 中:mode 綁定的里面的值
vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "Error: please transfer a valid prop path to form item!"
這樣就實現(xiàn)了動態(tài)渲染form表單了