elment-ui el-input无法正常输入

---

导入input无法输入的原因有如下几种原因：

1. v-model 绑定问题：请确保您在 input 组件中正确绑定了 v-model。v-model 绑定的是一个数据属性，而不是直接绑定接口数据。请检查 v-model 绑定的属性是否正确，并且该属性在接口数据中存在。

2. 禁用状态（disabled）：检查您在 input 组件上是否设置了禁用状态。如果接口数据中存在禁用状态的字段，并且该字段被绑定到 input 组件的 disabled 属性上，那么输入框将被禁用，无法输入。请检查接口数据和 disabled 属性的设置。

3. 初始化问题：如果 input 组件是通过接口数据动态生成的，可能存在初始化问题。确保在接口数据加载完成后再生成 input 组件，并确保 input 组件被正确地渲染到页面上。您可以在接口数据加载完成后，使用类似 v-if 或者 v-for 指令来动态生成 input 组件。

4. 样式问题：检查 input 组件的样式是否可能导致无法输入。例如，如果 input 的宽度设置为 0 或者隐藏了输入光标，都会导致无法输入。请检查样式设置是否正确，不会影响输入功能。

以上几种都是在网上查询到的，一般情况都会注意到。

 

下面有一些特殊情况也会导致input无法正常输入

1. 循环输入数据对象的问题

首先看下面两组数据，其中数据1会动态生成form表单如下图，但是此时是没有值，所以需要通过数据2来来给表单赋值。

 

代码如下：

<el-form-item v-for="(item,index) in values" :key="index" :label="item.label + '：'" required>

          <UploadFile v-if="item.type === 'image'" v-model="item.value" />

          <el-select v-else-if="item.type === 'select'" v-model="item.value" placeholder="请选择">
            <el-option
              v-for="it in item.options"
              :key="it.value"
              :label="it.label"
              :value="it.value"
            />
          </el-select>
          <el-input v-else v-model="item.value" />

        </el-form-item>

  getAssemblyInfo({ id: this.assemblyId }).then(res => {
        that.assembly = res.data
        that.values = that.assembly.types_trans
        if (that.isEdit) {
          that.values.forEach(function(item) {
            that.items.value.forEach(function(it) {
              if (item.prop === it.prop) {
                item.value = it.value
              }
            })
            return item
          })
       
        }
      })

其中 that.assembly.types_trans 表示的是数据1 ，that.items.value 表示的数据2

我这里是通过循环判断来实现将数据2中的value 赋值给数据1，看着没毛病，但是在修改数据时发现input无法输入，图片无法删除。

最后是将数据深度克隆一下正常了。 that.values = deepClone(that.values) 

这里的问题我想的应该是循环赋值导致了数据之间相互关联绑定了导致无法正常变更,具体的原因不是很懂！！！抱歉了！！！

修改以后的代码：

  if (that.isEdit) {
          that.values.forEach(function(item) {
            that.items.value.forEach(function(it) {
              if (item.prop === it.prop) {
                item.value = it.value
              }
            })
            return item
          })
          that.values = deepClone(that.values)
        }

 

 

数据1，

[
            {
                "label": "图片",
                "prop": "image",
                "type": "image"
            },
            {
                "label": "跳转地址",
                "prop": "url",
                "type": "text"
            }
        ]

数据2

[
    {
        "label": "图片",
        "prop": "image",
        "value": "https:\/\/image.upwqy.com\/malltpl\/upload\/default\/04cebf576fd4f568b38521858af13ca3.jpg",
        "type": "image"
    },
    {
        "label": "跳转地址",
        "prop": "url",
        "value": "222",
        "type": "text"
    }
]

 

 

发布时间 : 2023-02-28，阅读量：1371

---

本文链接：https://upwqy.com/details/358.html

---