Vuejs使用v-model指令在输入中键入内容会以某种方式删除一个CSS类

Question

因此，我有一个具有多个输入字段的表单，每当我在这些字段中键入内容时，它就会以某种方式操纵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事件侦听器(通过断点(
• 更改类名(怀疑"活动"名称太常见，可能会被其他库删除(
• 使用CCD_ 3和CCD_
• 甚至删除负责添加类的函数，并通过inspect元素手动注入类

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

Answer 1

您正在以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;
}
},