VueJS - 禁用输入文本中的空格

Question

我有一个叫做的组件TextInput.vue,我在里面创建了一个div

<div ts-text-input :ts-text-input-filled="setFilledAttribute && !!value"
:ts-text-input-not-valid="!valueValid">

<input :value="value" @input="setValue" @keyup.enter="enterClicked" :placeholder="placeholder" :title="title">

我现在想做的是禁用输入框内的一些空格,以便用户无法使用空格/空格键输入(例如;用户名输入框)

这是我所做的,我尝试使用功能,trim()但似乎我仍然无法解决它.

在计算函数中

    computed: {
  value: function() {
    const {valueGetter, valueGetterOptions} = this,
      getter = this.$store.getters[valueGetter];
      value.trim();
    return valueGetterOptions ? getter(valueGetterOptions) : getter;
  },

任何提示都会有所帮助.谢谢.(对不起,我的英语不好)

Answer 1

您可以直接阻止用户在输入字段中添加空格.preventDefault()告诉用户代理不应该像通常那样采取默认操作.

<input @keydown.space="(event) => event.preventDefault()">

或者让它更短(正如Sovalina指出的那样):

<input @keydown.space.prevent>