在工作岗位上，上边分配一个任务，创建一个页面，从0-1，全部自己搭建，也没有啥模版，就这么来，那就直接来吧，没办法，那就直接上手，开发过程中，我使用了v-model对输入文本框的值进行双向绑定，这样可以直接使用用户输入文本框的值，同时，后端传递的值也可以直接展示到文本框中，这样就实现文本框的双向绑定，但是需要注意的是，使用文本框有风险，一不小心就会碰到和我一样的问题，在输入了第一次值后，明明是一个空的文本框，你去输入文字，发现怎么输入数值，都是空的无法输入。
我的原因在于
<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就只有一个
brandAdd:{},
看清楚，我并未给name进行初始化，这样就导致了一个问题，也就是值无法进行绑定，这样就会导致我上边说的问题，明明文本框允许输入，但是就是无法输入值。
改成
brandAdd:{
name:null,
},
之后再次进行测试，发现可以了，这个问题我刚刚开始居然没注意到，实际上是v-model将值绑定后，无法再次输入值进行绑定，需要做的是，清除绑定值，然后将数据进行清空处理就可以完成了相关值进行绑定了，也就是值的绑定处理。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197935.html
