I have a v-text-field in vue, and I will like to remove all white spaces or prevent any white space from it. For instance 'Project Number' input should be 'ProjectNumber'.

I have a function but this doesn't work, I tried keyup too.

<v-text-field
  @input='removeWhiteSpace(row.newCol)'
  outlined
  dense
  color="primary"
  style="width: 200px;"
  v-model="row.newCol">
</v-text-field>

removeWhiteSpace(text) {
  return text.replace(/[\s\/]/g, '');
}

I have a v-text-field in vue, and I will like to remove all white spaces or prevent any white space from it. For instance 'Project Number' input should be 'ProjectNumber'.

I have a function but this doesn't work, I tried keyup too.

<v-text-field
  @input='removeWhiteSpace(row.newCol)'
  outlined
  dense
  color="primary"
  style="width: 200px;"
  v-model="row.newCol">
</v-text-field>

removeWhiteSpace(text) {
  return text.replace(/[\s\/]/g, '');
}

• javascript
• vue.js
• vuetify.js

4 Answers 4

There is a native vue modifier for that, v-model.trim

<v-text-field
  outlined
  dense
  color="primary"
  style="width: 200px;"
  v-model.trim="row.model">
</v-text-field>

Official documentation: https://vuejs.org/guide/essentials/forms#trim

You can do this:

<v-text-field
  @keydown.space.prevent
  outlined
  dense
  color="primary"
  style="width: 200px;"
  v-model="row.newCol">
</v-text-field>

From here: https://stackoverflow.com/a/53521999/10642485

For this, I'd recommend skipping v-model and just directly assign the transformed value

<v-text-field
  :value="row.newCol"
  @input="row.newCol = removeWhiteSpace($event)"
  outlined
  dense
  color="primary"
  style="width: 200px;">
</v-text-field>

This could be helpful for the use case of accepting a number:

If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model managed inputs:

<input v-model.number="age" />

If the value cannot be parsed with parseFloat(), then the original value is used instead.

The number modifier is applied automatically if the input has type="number".

Source: https://vuejs.org/guide/essentials/forms#number