Vuejs v-model.trim skips spaces-CodePudding

I want to write reactive fields with name without spaces, but there was a problem with v-model.trim, such code doesn't filter spaces, what's the problem? My Vue page

<template>
<div>
<span>Name: {{title}}</span>
<input type="text" v-model.trim="title">
</div>
</template>
<script>
export default{
data(){
    return{
        title:''
    }
}
}
</script>

CodePudding user response：

Trim only filter spaces at start and end.If you want remove all spaces,you can use const removeSpaces = (str)=>str.replace(/\s /g,'')

CodePudding user response：

If you want to prevent spaces in the input. You can prevent by using @keydown.space.prevent.

Working Demo :

new Vue({
  el: '#app',
  data() {
    return {
      title: ''
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <span>Name: {{title}}</span>
<input type="text" @keydown.space.prevent v-model="title"/>
</div>