0

Есть метод getDateFromApi который обращается к api получает инфу и передаёт её дальше. К примеру проверяем пароль, если ответ не правильный можно ли сделать вывод сообщения "Пароль не верный", под инпутом, как в rules сделан required ?

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

})
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container fluid>
        <v-text-field v-model="password" :append-icon="show1 ? 'visibility' : 'visibility_off'" :rules="[rules.required, rules.min]" :type="show1 ? 'text' : 'password'" name="input-10-1" label="Normal with hint text" hint="At least 8 characters" counter @click:append="show1 = !show1"></v-text-field>
      </v-container>
    </v-form>
  </v-app>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>

Условный метод получения данных из api:

 methods: {
        getDateFromApi() {
          if (response.data.detail !== "OK") {
            this.badResponse = true;
          }
        },
2
  • Вместо прямого биндинга дать элементу массив. В массив добавить новое условие после получения ответа с сервера.
    – Adrug
    22 авг 2019 в 14:47
  • @Adrug буду очень благодарен за расширенный ответ! 23 авг 2019 в 12:17

1 ответ 1

1

Первоначальный вариант, который я предлагал. Оказался не совсем подходящим т.к. после добавления правила автоматическая валидация не запускается и сообщение не выводится, пока вручную ввод не сделать, а жаль хороший вариант был.

Представляю второй с использованием биндингом на error-message.

 data() {
    return {
      show1: false,
      badResponse: false,
      password: "123",
      rules: {
        required: value => !!value || "Required.a",
        min: v => v.length >= 8 || "Min 8 characters"
      },
      errorMessage: '',
    };
  },
  methods: {
    getDateFromApi() {
      if (true) {
        this.errorMessage = "The username or password is incorrect!";
      } 
    }
  }

В шаблоне не забываем подписаться на событие @input чтобы при вводе ошибка с бэка скрылась, иначе она будет отображаться пока какая-нибудь другая ошибка валидации не затрет его.

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container fluid>
         <v-text-field
        v-model="password"
        :append-icon="show1 ? 'visibility' : 'visibility_off'"
        :rules="[rules.required, rules.min]"

        :type="show1 ? 'text' : 'password'"
        name="input-10-1"
        label="Normal with hint text"
        hint="At least 8 characters"
        counter
        :error-messages="errorMessage"
        @input="errorMessage = ''"
        @click:append="show1 = !show1"
      ></v-text-field>
      </v-container>
    </v-form>
  </v-app>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.