element-ui 输入框无法输入的问题

最新推荐文章于 2025-05-20 15:59:50 发布

一个抱抱一首歌

最新推荐文章于 2025-05-20 15:59:50 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue element 文章标签： elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_38992765/article/details/113952781

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

element

2 篇文章

订阅专栏

在Vue.js应用中，遇到input框校验规则的问题，需要后台提供特定字段以确保校验生效。原始代码通过直接赋值方式添加字段导致输入无法正常显示。原因是新添加的字段不具备响应性。解决方案是使用Vue的`this.$set`方法来确保字段响应式，从而修复了输入和回显的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

input框的校验规则需要存在该字段才能校验比如回显编辑的时候需要后台传该字段才能进行校验，这时候需要我们手动添加该字段
代码

for (let i = 0; i < item.materialsPeApplyDetailsDTOS.length; i++) {
        //在原本的列表里添加该字段，防止input校验规则不生效
        item.materialsPeApplyDetailsDTOS[i].amountIn = 0;
        item.materialsPeApplyDetailsDTOS[i].rackno = 0;
        item.materialsPeApplyDetailsDTOS[i].materialno = 0;
  }

如果采用上诉方法 ,会发现你再输入的时候会输不进去，要触发别的选择或者输入方法时候才能回显

原因

由于我们刚补进去的字段还不是响应式的，所以输入失败

解决

  for (let i = 0; i < item.materialsPeApplyDetailsDTOS.length; i++) {
       
        //修改成这样既可生效
        this.$set(item.materialsPeApplyDetailsDTOS[i], 'amountIn', 0);
        this.$set(item.materialsPeApplyDetailsDTOS[i], 'materialno', 0);
        this.$set(item.materialsPeApplyDetailsDTOS[i], 'rackno', 0);
 }