从 v-text-field Vue 中删除空格答案

【问题标题】：Remove white space from v-text-field Vue从 v-text-field Vue 中删除空格
【发布时间】：2022-04-05 21:59:44
【问题描述】：

我在 vue 中有一个 v-text-field，我想删除所有空格或阻止其中的任何空格。例如'Project Number' 输入应该是'ProjectNumber'。

我有一个功能，但这不起作用，我也尝试过keyup。

<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

【解决方案1】：

你可以这样做：

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

从这里： https://stackoverflow.com/a/53521999/10642485

【讨论】：

是的，我在论坛上找到了这个。这就是我最终使用的。

【解决方案2】：

有一个原生 vue 修饰符，v-model.trim

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

【讨论】：

我认为修剪只会删除结尾的空白，我改写了这个问题
v-model.trim 删除文本两端的空格
是的，我试图阻止输入任何空白

【解决方案3】：

为此，我建议跳过v-model，直接分配转换后的值

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

【讨论】：