v-model绑定导致的element UI文本框输入第一次值后被绑定，导致空文本框无法再输入文字

子非吾喵2023-09-19 18:16

在工作岗位上，上边分配一个任务，创建一个页面，从0-1，全部自己搭建，也没有啥模版，就这么来，那就直接来吧，没办法，那就直接上手，开发过程中，我使用了v-model对输入文本框的值进行双向绑定，这样可以直接使用用户输入文本框的值，同时，后端传递的值也可以直接展示到文本框中，这样就实现文本框的双向绑定，但是需要注意的是，使用文本框有风险，一不小心就会碰到和我一样的问题，在输入了第一次值后，明明是一个空的文本框，你去输入文字，发现怎么输入数值，都是空的无法输入。

我的原因在于

html 复制代码

<el-form ref="formAdd" :model="brandAdd" label-width="100px" :rules="rulesBrand">
        <el-row>
          <el-col :span="10">
            <el-form-item label="品牌名称" prop="name">
              <template>
                  <el-select v-model="brandAdd.name" allow-create filterable placeholder="请选择" clearable ref="brandref" @change="checkBrand('formAdd')" >
                    <el-option
                      v-for="item in optionstName"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
              </template>
            </el-form-item>
          </el-col>
     </el-row>
  </el-form>

但是我js就只有一个

js 复制代码

brandAdd:{},

看清楚，我并未给name进行初始化，这样就导致了一个问题，也就是值无法进行绑定，这样就会导致我上边说的问题，明明文本框允许输入，但是就是无法输入值。

改成

js 复制代码

brandAdd:{
   name:null,
   },

之后再次进行测试，发现可以了，这个问题我刚刚开始居然没注意到，实际上是v-model将值绑定后，无法再次输入值进行绑定，需要做的是，清除绑定值，然后将数据进行清空处理就可以完成了相关值进行绑定了，也就是值的绑定处理。