如何在提交時處理 q-input / preventDefault 中的“輸入”？

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事件修飾符“.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()