When working with Vue.js, I encountered an issue where elements would briefly flash curly braces to the user before being hidden. To combat this problem, I implemented the following solution:
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
Despite these console outputs, the element remains hidden, and even after checking in Firefox and Chrome developer tools, the hide-me class is still present. Interestingly, using jQuery's
$("#my-vue-element").removeClass("hide-me");