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

Question

所以我有一个包含多个输入字段的表单，每当我在这些字段中输入内容时，它都会以某种方式操纵 DOM，并从表单中删除某个 class active容器。请看这个GIF看看。

重现步骤：

点击创建您的帐户
在显示的任何字段中输入任何内容
观察错误行为（这是删除 active class 的结果）

模板代码：

        // 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');
      },

我尝试过的：

Disable/Enable 热重载
跟踪 DOM 事件侦听器（通过断点）
更改 class 名称（怀疑“活动”名称太常见，可能会被其他图书馆删除）
使用 e.preventDefault() 和 click.prevent；
甚至删除负责添加 class 的函数并通过 inspect elements

注意：- 删除 v-model 修复了问题

Answer 1

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

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

一个缩写示例：

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

data() {
  createAccountActive: false,
},

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

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

Vuejs typing into input with v-model directive removes a CSS class somehow

javascript

css

vue.js

nuxt.js

buefy

模板代码：

JS代码：

我尝试过的：