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.