如何解决Vuejs使用v-model指令输入时,会以某种方式删除CSS类
因此,我有一个包含多个输入字段的表单,每当我在这些字段中键入内容时,都会以某种方式操纵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模型可解决此问题
解决方法
您正在以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;
}
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。