VueJS Showing and Hiding Messages

Question

I have a basic CLI structure environment created. I have a component to display messages/alerts Ie: Login Failed etc…

Since this component is going to be reused thro

Answer 1

Firstly, it's important to understand the Vue and the v-if directive. v-if evaluates it's expression and if it evaluates to true, then Vue will render that element in the DOM, but if not, the element will not be included in the DOM.

This leads to the error message that you're seeing, since when there is no alert to show, there is no element in the DOM matching document.querySelector('.alert').

Additionally, it would be better if you have all hiding/showing code in the one component. For example, if you want it in the parent component, your hideAlert() method should be:

methods: {
    hideAlert() {
        this.alert = null
    }
}

And your alert button component would be:

Close

And where you have the tag in the parent would become: