Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Onsen UI Vue Side Splitter :open.sync not trigger
-
Basically trying to convert the OnsenUI Vue side splitter example from: https://onsen.io/v2/api/vue/v-ons-splitter-side.html so that it loads each of the pages from their own
.vue
templates.My example code can be found here: https://github.com/hermwong/onsenui-vue-side-splitter-example
Basically the
LeftMenu.vue
sets the:openSide
property in the page component (any of:Home.vue
,News.vue
orSettings.vue
). The page component then passes theopenSide
value into the:openSide
property ofCustomToolbar.vue
.In
CustomToolbar.vue
the value of theopenSide
property is assigned to the data attributeisOpen
.When the
<v-ons-toolbar-button>
is clicked inCustomToolbar.vue
, it updates the value ofisOpen
is updated and it emits themenuToggled
event which gets handled in the page component.The page component handles the
menuToggled
event & its payload by emitting themenuToggled
event & its payload up toLeftMenu.vue
.In
LeftMenu.vue
thesideMenu
method is used as an event handler for themenuToggled
event.The
sideMenu
method updates the value ofopenSide
with the payload received from themenuToggled
event.The
<v-ons-splitter-side :open.sync="openSide">
inLeftMenu.vue
does not seem to trigger after thesideMenu
method has been called.
-
@hermwong I think you don’t need to pass the
isOpen
value itself down to the toolbar. You just need a way to modify it. It can be done with a function prop (example here) or with events like you are doing (example here). Hope it helps!
-
Thanks for the response. I was able to get it to work by using the function prop method.