如何判断 vue.js 中的表单字段是否无效

Question

我正在开发一个 Vue 应用程序。我想知道表单字段是否处于无效状态。例如，如果该字段是必填字段，并且用户点击“提交”，但尚未填写该字段，则应触发浏览器的验证，并且该字段显示为红色，并在其下方显示一条验证消息。这就是我所说的无效状态。

$refs我可以通过以下方式引用该字段：

<v-text-field 
    ref="myField"
    required
    v-model="value" />

this.$refs['myField'].what?

我能做些什么来$refs['myField']告诉我它是否处于无效状态吗？

Answer 1

v-text-field有两个 mixin 属性可用于确定其验证状态：hasError或valid。要检查该字段是否无效，您可以执行以下操作：

this.$refs['myField'].hasError

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      password: 'Password',
      rules: {
        required: value => !!value || 'Required.',
        min: v => v.length >= 8 || 'Min 8 characters',
      },
    }
  },
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuetify@2.2.28/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.2.28/dist/vuetify.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

<v-app id="app">
  <v-container>
    <v-text-field
      ref="password"
      v-model="password"
      :rules="[rules.required, rules.min]"
      type="password"
      label="Password"
      hint="At least 8 characters"
      counter
    ></v-text-field>
    <pre v-if="$refs.password">
      hasError: {{$refs.password.hasError}}
      valid: {{$refs.password.valid}}
    </pre>
  </v-container>
</v-app>