vue.js - 如何检查 v-text-field 是否具有成功状态(或任何规则失败)？

Question

我有一个包含输入控件的组件(例如 v-text-field )。该组件提供了一些 Prop ，例如输入的字段规则。每当输入值通过每条规则/进入成功状态时，我想调用一个函数。

给定以下示例代码

Reproduction link

<template>
  <v-app>
    <v-main>
      <v-text-field v-model="msg"
                    :rules="[ v => v.length > 0 || 'required' ]"
                    @update:model-value="onInput"
      />
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')

function onInput(newValue) {
  if(true /* text-field has success state => do things */) {
    console.log(newValue);
  }
}
</script>

如何检查该字段是否通过了所有规则？我无法在 the docs 中找到事件

我认为再次运行每个规则函数会很慢。

Answer 1

正如您所说，您想在聚焦事件中验证这一点，您可以通过将 reference 添加到输入字段来实现，然后通过在聚焦事件中使用此语法来验证它。

this.$refs.msgInput.validate()

现场演示:

new Vue({
  vuetify: new Vuetify(),
  data: {
    msg: ''
  },
  methods: {
    validateField() {
      this.$nextTick(() => {
        if (this.$refs.msgInput.validate()) {
          console.log('validation passed')
        } else {
          console.log('validation failed')
        }
      })
    }
  }
}).$mount('#app');

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"/>

<div id="app">
  <v-text-field
    outline
    v-model="msg"
    label="Enter your message"
    :rules="[(v) => !!v || 'required']"
    @blur="validateField"
    ref="msgInput"
  />
</div>

注意:如果您的组件中有多个输入，那么我的建议是使用 v-form 并将引用附加到表单。这样您就可以在一次提交中验证所有输入。