如何解决报错：please transfer a valid prop path to form item!

最新推荐文章于 2025-04-14 14:13:28 发布

原创最新推荐文章于 2025-04-14 14:13:28 发布 · 1.7w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue #js #html

本文介绍了一种改进的方法来配置表单中的图片尺寸输入项，通过调整Vue中el-form-item组件的属性引用，实现了更稳定的表单数据绑定。此方案解决了原有代码中因变量引用不当导致的问题。

 <el-form-item v-for="(item, index) in formData.picSize" :key="item.title" :label="item.title" class="yydh-bili">
                <el-form-item
                    :prop="'item.' + index + '.width'"
                    :rules="picRules"
                >
                    <el-input v-model="item.width" style="width: 80px; margin-right: 10px;"></el-input>
                    <span>：</span>
                </el-form-item>
                <el-form-item
                    :prop="'item.' + index + '.height'"
                    :rules="picRules"
                >
                    <el-input v-model="item.height" style="width: 80px; margin-right: 10px;"></el-input>
                </el-form-item>
</el-form-item>


<script>
formData: {
                picSize: [
                    {
                        name:'ACTIVITYBIGSIZE',
                        title: 'title1',
                        width: 4,
                        height: 3,
                    },
                    {
                        title: 'title2',
                        width: 4,
                        height: 3,
                    },
                ],
}

</script>

解决方式：把props的item变量换成formData表单定义的 picSize

 <el-form-item v-for="(item, index) in formData.picSize" :key="item.title" :label="item.title" class="yydh-bili">
                <el-form-item
                    <!--我在这里-->
                    :prop="'picSize.' + index + '.width'"
                    :rules="picRules"
                >
                    <el-input v-model="item.width" style="width: 80px; margin-right: 10px;"></el-input>
                    <span>：</span>
                </el-form-item>
                <el-form-item
                     <!--我在这里-->
                    :prop="'picSize.' + index + '.height'"
                    :rules="picRules"
                >
                    <el-input v-model="item.height" style="width: 80px; margin-right: 10px;"></el-input>
                </el-form-item>
</el-form-item>