Блог

Итак, у меня есть форма с несколькими полями ввода, всякий раз, когда я что-то вводлю в эти поля, каким-то образом она манипулирует DOM и удаляет определенный класс active из контейнера формы. Пожалуйста, посмотрите этот GIF, чтобы увидеть это.

Шаги для воспроизведения:

1. Нажмите создать свою учетную запись
2. Введите что-либо в любое из показанных полей
3. Обратите внимание на ошибочное поведение (которое является результатом удаления active класса)

Код шаблона:

         // active class is getting injected here
        <div class="login-forms__container">
          <section class="new-user__section">
            <form>
              <h1>{{ $t('login.create-form.title') }}</h1>
              <p>{{ $t('login.create-form.subtitle') }}</p>
              <b-field>
                <b-input
                  v-model="registerForm.fullName"
                  :placeholder="$t('login.create-form.name')"
                  type="text"
                  icon-pack="fas"
                  icon="user"
                  maxlength="25"
                />
              </b-field>

              ....

              <div class="field">
                <small>
                  <a target="_blank" @click.prevent="toggleCreateAccount">
                    {{ $t('login.create-form.registered') }}
                  </a>
                </small>
              </div>
            </form>
          </section>
        </div>
  

JS-код:

     methods: {
      toggleCreateAccount () {
        document
          .querySelector('.login-forms__container')
          .classList
          .toggle('active');
      },
  

Что я пробовал:

• Отключить / включить горячую перезагрузку
• Отслеживание прослушивателей событий DOM (через точки останова)
• Изменение имени класса (подозревается, что «активное» имя слишком распространено и может быть удалено другими библиотеками)
• Использование e.preventDefault() и click.prevent ;
• Или даже удаляет функцию, ответственную за добавление класса, и вводит класс вручную через inspect elements

Примечание:- удаление v-model устраняет проблему

Вы изменяете DOM вручную таким образом, что Vue не может отследить. Когда приходит время для повторного ввода, он видит добавленный вами класс, но поскольку он не соответствует VDOM в шаблоне (у вас нет «активного» в вашем шаблоне), он считает, что его нужно удалить (VDOM = источник истины).

Вы должны условно включить active класс в свой шаблон, Vue автоматически исправит DOM для вас.

Сокращенный пример:

 template: `<div :class="{'.login-forms__container': true, active: createAccountActive }">`,

data() {
  createAccountActive: false,
},

methods: {
  toggleCreateAccount() {
    this.createAccountActive = !this.createAccountActive;
  }
},