如何在提交时处理 q-input / preventDefault 中的“输入”？

Question

我有一个文本输入字段，例如：

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

当用户点击输入时，我想把它当作提交，即处理输入而不是在文本中添加额外的换行符。

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

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

Answer 1

您需要在事件中使用 vue事件修饰符“.prevent”。它也需要是一个@keydown 事件，因为在“textarea”类型的输入中使用@keydown 事件调用“add newline”事件。

解决方案是：

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

编辑：

“提交”是一种您必须定义的方法。这是我在 codepen 中制作的示例：

代码笔示例

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

this.$refs[refKeyYouGaveToYourForm].submit()