Vuejs使用v-model指令输入时，会以某种方式删除CSS类

问题描述

因此，我有一个包含多个输入字段的表单，每当我在这些字段中键入内容时，都会以某种方式操纵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;
• 甚至删除负责添加类的功能，并通过检查元素手动注入类

注意：-删除v模型可解决此问题

解决方法

您正在以Vue无法追踪的方式手动修改DOM。当需要重新渲染时，它会看到您添加的类，但是由于它与模板中的VDOM不匹配（您的模板中没有“活动的”），因此认为必须将其删除（VDOM =源的确如此）。

您应该有条件地在模板中包含active类，Vue会自动为您修补DOM。

一个简短的例子：

template: `<div :class="{'.login-forms__container': true,active: createAccountActive }">`,data() {
  createAccountActive: false,},methods: {
  toggleCreateAccount() {
    this.createAccountActive = !this.createAccountActive;
  }
},