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

by

3👍

✅

You’re modifying the DOM manually in a way that Vue can’t trace. When it comes time to rerender, it sees the class you added, but since it doesn’t match the VDOM in the template (you don’t have "active" in your template), it thinks it must be removed (VDOM = source of truth).

You should conditionally include the active class in your template, Vue will automatically patch the DOM for you.

An abbreviated example:

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

data() {
  createAccountActive: false,
},

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

Leave a comment