Vue.js prevents classList.remove from working?

Question

I'm using Vue.js, and I want to hide the elements until after the call to the Vue constructor because otherwise, a bunch of curly braces get flashed to the user. I have the following:

HTML:

<div class="main hide-me" id="my-vue-element">
    <!-- stuff -->
</div>

CSS:

.hide-me {
    display: none !important;
}

JavaScript:

var myVueElement = document.getElementById("my-vue-element");

if (myVueElement) {
    var myApp = new Vue({
        el: myVueElement
      , data: {
            /* stuff */
        }
      , methods: {
            /* stuff */
        }
    });

    console.log(myVueElement);
    console.log(myVueElement.classList);
    myVueElement.classList.remove("hide-me");
    console.log(myVueElement.classList);
    console.log(myVueElement.getAttribute("class"));

The console output is:

DOMTokenList [ "main", "hide-me" ]
DOMTokenList [ "main" ]
main

However, the element does not appear, and using the DOM inspectors in Firefox and in Chrome shows the hide-me class is still there. I've tried to reproduce this using a simplified example but am unable to do so. I do have jQuery in this same project, and I found that using $("#my-vue-element").removeClass("hide-me"); (or even adding it after the above code) causes the class to be removed from the DOM. Any ideas? Thanks!

Don't do that. Instead, use data-binding to add the class conditionally. — SLaks, Jan 18 '19 at 18:30
honestly you probably want this: [v-cloak](https://vuejs.org/v2/api/#v-cloak). "this [v-cloak] directive can be used to hide un-compiled mustache bindings until the Vue instance is ready" — birdspider, Jan 18 '19 at 18:54

score 2 · Answer 1 · edited Jul 15 '22 at 23:52

Direct DOM manipulation should be avoided in Vue. Instead, you should let Vue do it (it's quite good at it). So use

<your-element
  :class="['always-present', {'optional':expression}]"
/>

Where optional will be added/removed based on data-bound expression.

Additionally, you could use v-if, v-show or v-hide (i.e.: v-if="expression"), if all you want is to show/hide the element.

For a list of cases where direct DOM manipulation makes sense in Vue and each case's downside or potential pitfall, read Handling Edge Cases.

score 0 · Answer 2 · answered Jan 18 '19 at 19:00

If you utilize Vue views/components and their internal template code, the elements won't be rendered until Vue is ready.

Meaning inside of app.vue nothing shows up until the router loads the view

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

Vue.js prevents classList.remove from working?

2 Answers2