I need some help on some Vue (version 2) basic logic concept about communicating between components, I can't seem to grasp..
I have a dashboard (Dashboard.vue) from which I open a popup:
<FormXPopup v-show="isVisible">
Inside FormXPopup.vue I have a popup component <Popup> with a content slot.
Popup has a close button that emits 'close' which toggles the isVisible boolean in Dashboard.vue.
In Popup's content slot I've placed a form component: <FormX>
FormX has form validation. And a cancel button which also emits 'close' in Dashboard.vue.
Now I want to clear all validation when closing the popup.
I can easily clear it and then emit 'close' when I click the cancel button from inside FormX.vue.
However when I click the close button which resides in <Popup> I don't know how to clear the form.
Also, Popup is being reused so I'm looking for a flexible solution.
So how do I clear the form (the child) when I close the popup (the parent)?
There is a difference between v-show and v-if in Vue.js
When you use v-show, Vue will render FormXPopup and apply display: none; to it until isVisible === true.
This costs more when loading the page, but switching the variable is cheap in performance. This should be used when the variable changes a lot.
When you use v-if, Vue will not render the component until the condition is true. Once the component is rendered, if the condition goes back to false, the component will be destroyed. Hence, you don't need to clear the form manually.
This solution costs less when rendering the initial page, but it takes more time when the variable changes.
Knowing that, you should use v-if in that situation since isVisible doesn't change that much, and since the popup has a state that needs to be reinitialized every time.
v-show is just style adjust logic.
v-show:falseis to add display: none in this tag's style.