最近做表单修改,用到了element-ui的form组件,遇到了一件怪事儿:
报错信息:
但是功能表单可以正常使用,但这个报错看着太无语了
于是,就开始解决吧
分析原因:这个错误是因为
el-form
组件的model
属性期望接收一个对象,但是你传入了一个数组。你需要将this.form
改为一个对象,而不是数组。你可以尝试将this.form
初始化为一个空对象,然后在循环中使用item
作为键来访问和修改它的属性。以下是修改后的代码:<template> <div> <!-- ... --> <el-form :model="form" ref="refForm" :rules="rules" label-width="100px"> <el-row v-for="(item, index) in formItems" :gutter="20" :key="index"> <!-- ... --> </el-row> <!-- ... --> </el-form> </div> </template> <script> export default { data() { return { form: {}, // 修改为空对象 formItems: [ // 在这里定义你的表单项 ], // ... }; }, methods: { updateBtn() { // ... }, }, }; </script>
这样,你就可以在循环中使用
item
作为键来访问和修改form
对象的属性,而不会出现类型检查失败的错误。