Onsen UI Vue Side Splitter :open.sync not trigger

[hermwong]

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 or Settings.vue). The page component then passes the openSide value into the :openSide property of CustomToolbar.vue.

In CustomToolbar.vue the value of the openSide property is assigned to the data attribute isOpen.

When the <v-ons-toolbar-button> is clicked in CustomToolbar.vue, it updates the value of isOpen is updated and it emits the menuToggled event which gets handled in the page component.

The page component handles the menuToggled event & its payload by emitting the menuToggled event & its payload up to LeftMenu.vue.

In LeftMenu.vue the sideMenu method is used as an event handler for the menuToggled event.

The sideMenu method updates the value of openSide with the payload received from the menuToggled event.

The <v-ons-splitter-side :open.sync="openSide"> in LeftMenu.vue does not seem to trigger after the sideMenu method has been called.

[Fran Diox]

@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!

[hermwong]

Thanks for the response. I was able to get it to work by using the function prop method.