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>
I enter "H e l l o", and I get it, but I want "Hello"
Trim only filter spaces at start and end.If you want remove all spaces,you can use const removeSpaces = (str)=>str.replace(/\s+/g,'')
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>