Блог

У меня есть CodePen, демонстрирующий проблему при проверке проверки VTextField. Код CodePen также приведен ниже.

Внутри updateTitle метода я хотел бы иметь возможность проверять, является ли значение допустимым, потому что мне нужно запустить некоторую пользовательскую логику при изменении значения, и то, что выполняется, будет зависеть от того, является ли значение допустимым.

Я вижу, что v-text-field имеет valid validationState свойство and . Можно ли получить доступ к любому свойству внутри updateTitle ?

HTML

 <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>
  

JS:

 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 );
    }
  }
})
  

Ответ заключается в том, чтобы предоставить ref v-text-field . Это позволяет получить доступ к полю через специальное $refs свойство и вызвать validate функцию. Изменения в CodePen являются:

             <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 );
    }