學習如何使用文字欄位進行正面驗證並發送數據

Question

我有一個具有驗證規則的v-text-field，在失去焦點時會觸發一些東西。

<v-text-field
    :rules="validationRules"
    @blur="emitFunction"
></v-text-field>

有沒有辦法只在驗證通過時才呼叫emitFunction？

Answer 1

你可以使用v-form將其包起來，並使用v-model來追蹤表單的有效性

const isValid = ref(false)
function emitIfValid() {
  if (isValid.value) emitFunction()
}

<v-form v-model="isValid">
  <v-text-field
    :rules="validationRules"
    @blur="emitIfValid"
  />
</v-form>