Vue.js 检查VTextField的有效性

我有一个密码笔在演示这个问题。代码笔代码也在下面

在

updateTitle

方法中，我希望能够检查值是否有效，因为当值更改时，我需要运行一些自定义逻辑，执行的内容将取决于值是否有效

我可以看到v-text-field具有

valid

和

validationState

属性。是否可以访问

updateTitle

中的任一属性

HTML

JS:

newvue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
标题：“初步报告”，
规则：{
必需：value=>！！value | |“必需”，
计数器：value=>value.length答案是为
v-text-field
提供一个
ref
。这允许用户通过特殊的
$refs
属性访问字段，并调用
validate
函数。对的更改包括：

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
  
          <v-col cols="12" sm="6">
            <v-text-field
              :value = "title"
              :rules="[rules.required, rules.counter]"
              label="Title"
              counter
              maxlength="20"
              @input="updateTitle"              
            ></v-text-field>
          </v-col>
  
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      title: 'Preliminary report',
      rules: {
        required: value => !!value || 'Required.',
        counter: value => value.length <= 10 || 'Max 10 characters'
      }
    }
  },
  
  methods: {
    updateTitle( value ) {
      console.log( "update", value );
    }
  }
})

            <v-text-field
              ref = "theField"
              :value = "title"
              :rules="[rules.required, rules.counter]"
              label="Title"
              counter
              maxlength="20"
              @input="updateTitle"           
            ></v-text-field>

    updateTitle( value ) {
      const isValid = this.$refs.theField.validate();
      
      console.log( "update", value, isValid );
    }