Условное связывание классов с использованием вычисленного пропета Vue 2 - PullRequest
Новая
       8

Условное связывание классов с использованием вычисленного пропета Vue 2

1 голос
/ 10 октября 2019

Я хотел дать некоторые визуальные сигналы проверки формы, поэтому я попытался использовать привязку класса, чтобы сделать это. Если я использую троичный inline, он на самом деле не соответствует моим требованиям относительно того, что должно произойти, но когда я попытался использовать компьютерный пропеллер, все остальные компоненты исчезли.

Если я попытался сделать это следующим образом:v-bind:class="[(!validation.hasError('form.fullName'))?'has-success':'has-danger noValid']"

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

Кстати, я использую simple-vue-validator.

Вот компонент godforsaken, который я используюvue now-ui-kit template от Creative Tim в качестве основы и настройте мой путь оттуда. Это их компонент ввода группы форм, документы здесь 

<fg-input
  class="input-lg"
  :label="validation.firstError('form.fullName')"
  placeholder="Full Name..."
  v-model="form.fullName"
  addon-left-icon="now-ui-icons users_circle-08"
  v-bind:class="{ visualValidation }"
></fg-input>

Компонент кнопки: bootstrap-vue, потому что их настраиваемая кнопка на самом деле не служит моей цели 

<b-button type="submit" block pill variant="info" @click="submit">Submit Form</b-button>

Мои вычисления: noValid - это потрясающий класс анимации, has-success и has-danger просто изменяет их внешний вид. 

computed: {
    visualValidation: function() {
      const successClass = "has-success";
      const errorBoi = "has-danger";
      const shakeBoi = "noValid";
      if (validation.firstError("form.fullName")) {
        return errorBoi + " " + shakeBoi;
      } else if (!validation.hasError("form.fullName")) {
        return successClass;
      }
    }
  }

Я думал, что переменные, которые я вернул, будут связаны как классы с form.fullNameМодель, но она ничего не делает, еще лучше, все мои другие компоненты не рендерится.

Что мне здесь делать? я только начинаю изучать Vue.js, так что я не совсем понимаю, что здесь происходит.

Редактировать отсюда:

Я переписал логику для привязки своего класса и просто используюметод удаления класса по щелчку компонентов.

вот обновленный компонент: 

<fg-input
              class="input-lg"
              :label="validation.firstError('form.email')"
              placeholder="Email Here..."
              v-model="form.email"
              addon-left-icon="now-ui-icons ui-1_email-85"
              v-bind:class=" {'has-success' : isSuccEmail, 'has-danger' : isFailEmail, 'noValid': validNoEmail} "
              @click="removeShake()"
            ></fg-input>

данные: 

isSuccEmail: false,
isFailEmail: false,
validNoEmail: false

метод: 

removeShake: function() {
      let vm = this;
      vm.validNoName = false;
      vm.validNoEmail = false;
      console.log(vm.validNoEmail);
      console.log(vm.validNoName);
    },

Однако в настоящее время существует ошибка, при которой валидатор не проверяет отдельно. Это дало классу успешно выполнено отправку по электронной почте, хотя это было полное имя, которое было успешным. 

    valEmail: function() {
      let vm = this;

      vm.$validate("form.email").then(function(success) {
        if (success) {
          vm.isFailEmail = false;
          vm.isSuccEmail = true;
        } else if (!success) {
          vm.isSuccEmail = false;
          vm.isFailEmail = true;
          vm.validNoEmail = true;
        } else {
          alert("Fatal Error");
        }
      });
    },
    valName: function() {
      let vm = this;

      vm.$validate("form.fullName").then(function(success) {
        if (success) {
          vm.isFailName = false;
          vm.isSuccName = true;
        } else if (!success) {
          vm.isSuccName = false;
          vm.isFailName = true;
          vm.validNoName = true;
          console.log(vm);
        } else {
          alert("Fatal Error");
        }
      });
    }

$ validate является функцией simple-vue-validator, the docs .

Функция Submit просто вызывает эти две функции выше.

Я думаю, что из-за вызова обещания, есть ли способ вызвать $ validate () без обещания?

1 Ответ

0 голосов
/ 10 октября 2019

Здесь есть несколько проблем.

Во-первых, хотя шаблоны не требуют использования this., вам все равно нужно использовать его в своем коде JS. Вы должны увидеть ошибку в консоли или, возможно, даже во время компиляции, в зависимости от того, как сконфигурирован linting. 

if (validation.firstError("form.fullName")) {

Что такое validation? Я предполагаю, что должно быть this.validation. Аналогично на пару строк ниже.

Ваша следующая проблема здесь: 

v-bind:class="{ visualValidation }"

Здесь фигурные скобки создают литерал объекта, поэтому он эквивалентен следующему: 

v-bind:class="{ visualValidation: visualValidation }"

Это будет условно добавить строку 'visualValidation' как класс, а это не то, что вам нужно. Избавиться от брекетов: 

v-bind:class="visualValidation"
...