Issue with Navba submenu b-dropdown-item #2340
-
|
Hello, I'm working on upgrading our Vue2 project to Vue3, and encountered some issues after switching from BTV (BootstrapVue) to BSVN (BootstrapVueNext). Two of them are related to Navbar menu and submenu. Due to the length, the first issue is states in a separate discussion #2339 The second issue is that, for all menus that have dropdown submenu, the submenu dropdown list would render as a blank box upon initial page load, and would only show up after a page refresh. I compared the DOM generated between the BSV version and BSVN version: in both cases the b-dropdown-item is converted into "li" tag. But for the latter case, the "li" tag has an extra property d-none = "true" upon initial page load (which gets dropped after page refresh), while the former doesn't. In our code, this property d-none is computed from a method which does return false upon initial load, so I'm not sure why the generated "li" tag carries a true value on it. Here is the link to the code: https://github.com/AudiovisualMetadataPlatform/amppd-ui/blob/AMP-3469_menuBVN/src/components/navigation/Sidebar.vue, see line 32. Below is the generated nav-bar elements in the DOM: I also attached a screenshot of the page with the Navigation submenu under the Content menu highligted in browser inspector (see b-dropdown-item-BSVN.png). As a comparison, a screenshot for the same page/submenu when using BSV (b-dropdown-item-BSV.png). Thanks a lot for any suggestions! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Quick look only so might be wrong, but hopefully will give you direction finding your bug: <b-nav-item-dropdown
:class="{
'd-none': resolvePermissions(menu.permissionKey)
}"
v-else
>in vue functions aren't reactive, so I think your acActions variable, that is used in resolvePermissions, isn't loaded on the first load, and cached on the second (in createPersistedState, so localStorage?). I don't know how your state is loaded, haven't used vuex in years. on defaultState the acActions is an empty array, and you're using |
Beta Was this translation helpful? Give feedback.
Quick look only so might be wrong, but hopefully will give you direction finding your bug:
in vue functions aren't reactive, so I think your acActions variable, that is used in resolvePermissions, isn't loaded on the first load, and cached on the second (in createPersistedState, so localStorage?). I don't know how your state is loaded, haven't used vuex in years.
on defaultState the acActions is an empty array, and you're using
reduce((acc, current) => acc && current, true)which defaults to true. Maybe default it to false?