bogdan_uman
@bogdan_uman
шлЫмазл неукЪ-поцЪ

Автозаполнение формы и значение?

Здравствуйте. Подскажите пожалуйста. Как можно определить значение автозаполненого поля при старте формы. Пробовал уже и таймауты и программно клацнуть. Ничего не помогает. У меня еще и кнопка блокирована если нет значений, а при автозаполнении как бы нет значений в переменных. Браузер Chrome.
5ac88a29ed8cf559686830.jpeg

Вот сам код формы
spoiler
<template lang='pug'>
v-content
  v-container(
    fluid,
    fill-height
  )
    v-layout(
      align-center,
      justify-center
    )
      v-flex(
        xs12,
        sm8,
        md6
      )
        v-card
          v-toolbar(
            dark,
            color='primary'
          )
            v-toolbar-title
              | Examples

            v-spacer
            v-btn(
              @click='onSignUp'
              flat
              small
              color='white'
            )
              | {{ $t('buttonSignUp') }}

            ChooseLang

          v-card-text
            form( @submit.prevent='onSubmit' autocomplete="on" )

              v-text-field(
                :label='$t("email")',
                id='email'
                v-model='email'
                @keyup.enter='$refs.password.focus( )'
                :error-messages='errors.collect("email")'
                v-validate='{ required: true, email: true }'
              )

              v-text-field(
                :label='$t("password")'
                v-model='password'
                @keyup.enter='onSubmit'
                ref='password'
                :append-icon='passVisible ? "visibility" : "visibility_off"'
                :append-icon-cb='( ) => this.passVisible = !this.passVisible'
                :error-messages='errors.collect("password")'
                :type='passVisible ? "text" : "password"'
                v-validate='{ required: true, min: 5, max: 30, regex: /^\\S+$/ }'
                data-vv-name='password'
                id='password'
              )

          v-card-actions
            v-container( grid-list-md )
              v-layout( row wrap )
                v-flex(
                  xs12
                  sm6
                  md5
                  lg4
                  color='primary'
                )
                  v-btn(
                    @click='onRecovery'
                    flat
                    block
                  )
                    | {{ $t("recoveryPassword") }}

                v-spacer( class='hidden-xs-only' )
                v-flex(
                  xs12
                  sm4
                  md3
                  dark
                  color='primary'
                )
                  v-btn(
                    :disabled='isDisabled'
                    @click='onSubmit'
                    color='primary'
                    block
                    id='bbb'
                  )
                    | {{ $t('buttonSubmit') }}

                v-flex( xs12 )
                  v-alert(
                    type='error'
                    v-model='errorEnter'
                    transition='scale-transition'
                    dismissible
                  )
                    | {{ $t('errorEnter') }}
</template>

<script>
export default {
  data: ( ) => ( {
    email: '',
    password: '',
    passVisible: false,
    errorEnter: false
  } ),
  computed: {
    isDisabled( ) {
      return !this.email || !this.password || this.errors.any( );
    }
  },
  methods: {
    onSubmit( ) {
      this.$validator.validateAll( ).then( result => {
        if ( result ) {
          const { email, password } = this;
          this.$store.dispatch( 'auth/signIn', { email, password } )
            .then( status => {
              if ( status ) {
                this.$router.push( { name: 'home' } );
              } else {
                this.errorEnter = true;
              }
            } );
        }
      } );
    },
    onRecovery( ) {
      this.$router.push( { name: 'recoveryPassword' } );
    },
    onSignUp( ) {
      this.$router.push( { name: 'signUp' } );
    }
  },
  i18n: {
    messages: {
      en: {
        buttonSignUp: 'Sign Up',
        buttonSubmit: 'Login',
        recoveryPassword: 'Forgot your password?',
        errorEnter: 'Incorrect еmail or password'
      },
      ru: {
        buttonSignUp: 'Регистрация',
        buttonSubmit: 'Вход',
        recoveryPassword: 'Восстановить пароль',
        errorEnter: 'Неверный еmail или пароль.'
      }
    }
  }
};
</script>
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
КРАФТТЕК Санкт-Петербург
от 60 000 до 80 000 ₽
Brightdata Тель-Авив
от 5 500 до 6 500 $
Rocket Брянск
от 60 000 до 100 000 ₽
22 мая 2024, в 07:09
50000 руб./за проект
22 мая 2024, в 02:15
10000 руб./за проект