search

NeilMatthewLua / ccapdev_zarap

0 stars 1 forks source link

Dropdown Materialize Conflicting with V-if #60

Open NeilMatthewLua opened 4 years ago

NeilMatthewLua commented 4 years ago

Description

Dropdown from navbar works fine when it is loaded on run, but if it's loaded after logging in, dropdown does not work anymore

Expected Result

Dropdown works from navbar to see user menu

Actual Result

Dropdown is not working

Branch Affected

nlua-mongodb

Steps to Replicate

To see that the drop down is working

(Step 1) Head over to navbarHome.vue, and set data of isLogged to true
(Step 2) Run the app, drop down works

Try logging in

(Step 1) Populate mongoDB (localhost:9090/populate)
(Step 2) Log in with a user (Information is in mongo compass since information is randomized)
(Step 3) With a successful login, you are brought to the home page, now the dropdown wont work anymore.

Useful Link

https://stackoverflow.com/questions/38113288/v-if-conflicts-with-materialize-css-dropdown-button
Kurotwo commented 4 years ago

Greetings! I have experienced a similar problem with Materialize and initializing carousels. I had used "v-show" instead of "v-if" as "v-if" removes or adds elements to the DOM while "v-show" only sets its css attribute to hidden. This way, the component wont experience any re-initialization problems. Cheers!