如何在提交时处理 q-input / preventDefault 中的 "enter"？

Question

我有一个文本输入字段，类似于：

        <q-input
          @blur="checkTextAnswer"
          @keyup.enter="submit"
          @keydown="checkEnterKey"
          v-model.trim="textInput"

当用户按下回车键时，我想将其视为提交，即处理输入而不是在文本中添加额外的换行符。

有点像 JQuery 天的 preventDefault。我确实找到了这个： https://quasar-framework.org/components/other-utils.html 但似乎更一般 DOM 事件

我也试过只修改字符串（str.replace 换行），但即使是那个 hack 也有一个丑陋的延迟。

Answer 1

您需要在活动中使用 vue event modifier“.prevent”。它还需要是一个@keydown 事件，因为 "add newline" 事件是在 "textarea".

类型的输入中使用 @keydown 事件调用的

解决方案是：

     <q-input
      type="textarea"
      @keydown.enter.prevent="submit"
      v-model.trim="textInput"

编辑：

'submit' 是您必须定义的方法。这是我在 codepen 中制作的示例：

Codepen example

如果您想在按回车键时提交表单，您可以使用 javascript。

this.$refs[refKeyYouGaveToYourForm].submit()

如何在提交时处理 q-input / preventDefault 中的 "enter"？

how to handle an "enter" in a q-input / preventDefault on submit?

javascript

forms

preventdefault

quasar-framework