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

【问题标题】：Vuejs typing into input with v-model directive removes a CSS class somehowVuejs 使用 v-model 指令输入输入会以某种方式删除 CSS 类
【发布时间】：2020-12-17 17:07:59
【问题描述】：

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

重现步骤：

点击创建您的帐户
在任何显示的字段中输入任何内容
观察错误行为（这是删除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-model 可以解决问题

【问题讨论】：

标签： javascript css vue.js nuxt.js buefy

【解决方案1】：

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

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

一个简短的例子：

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

data() {
  createAccountActive: false,
},

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

【讨论】：