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

最新推荐文章于 2025-05-23 08:59:44 发布

Yongqiang Chen

最新推荐文章于 2025-05-23 08:59:44 发布

阅读量1.1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏：学习篇文章标签： vue.js html5 elementui javascript 前端

本文链接：https://blog.youkuaiyun.com/Calvin_qiang/article/details/121531525

学习篇专栏收录该内容

36 篇文章

订阅专栏

在Vue项目中使用ElementUI的Input组件时，发现v-model.trim会导致输入时无法输入空格。通过分析，了解到这是由于Element的Input不支持v-model.trim。为了解决这个问题，可以改用@blur事件结合JavaScript的trim方法，在失去焦点时去除首尾空格。示例代码展示了如何在不使用修饰符.trim的情况下实现这一功能。

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

在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>