javascript - 如何在提交时处理 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()