在Vue项目里使用element ui在input框上使用v-model.trim导致输入空格失效

最新推荐文章于 2024-07-02 18:11:40 发布

liu__software

最新推荐文章于 2024-07-02 18:11:40 发布

阅读量1.4k

点赞数 3

分类专栏： vue 文章标签： vue.js elementui

原文链接：https://blog.csdn.net/Calvin_qiang/article/details/121531525

版权

vue 专栏收录该内容

143 篇文章 12 订阅

订阅专栏

在vue项目里使用element ui组件库，你会发现使用element的input框，如果在v-model上加.trim修饰符，得到的内容是去除了前后空白的，但是在输入数据的时候没法按空格键输入空格，这让录数据的人非常难受。分析不能输入空格的原因就是，element的input框不支持v-model.trim的写法，如图：

了解原因以后，想解决去除输入值前后空白又能输入空格的问题就清楚很多了，我现在的写法是这样的，不用修饰符.trim，使用js的trim方法，在el-input的@blur事件中去除首尾空格：

代码：

<el-form-item label="名称：" class="postInfo-container-item">
   <el-input
     placeholder="请输入内容"
     v-model="searchData.name"
     @blur="searchData.name=$event.target.value.trim()"
     clearable
     maxlength="50"
     show-word-limit
    >
    </el-input>
</el-form-item>

————————————————
版权声明：本文为CSDN博主「Yongqiang Chen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Calvin_qiang/article/details/121531525