Segment and button bar in VUE2 with OnsenUI2

[Moshe Flam]

How do I make with vue-onsen a segment (a choice of one button out of several in a row)
or a button-bar as defined in the onsen-ui css?

See here in css documentation: https://onsen.io/v2/api/css.html#segment-category
vs. here in vue documentation: https://onsen.io/v2/api/vue/v-ons-button.html

I’m thinking out loud here:
I make a .vue component called my-v-segment that is simply a div with class segment.
It has a group-name variable not shown in the DOM.

In it I make a .vue component called my-v-segment-button that is simply a button with class segment-item
and in it an input element type:radio with class:segment__input and a name attribute: pointing to the group-name.

Then I make a card and it shows the content that is set for that “tab” (i.e. selected button in the “segment”)

Anybody with VUE experience care to make a pen?

[Fran Diox]

@Moshe-Flam Well, you could certainly do that but I think it would be easier to use the official v-ons-segment component :sweat_smile:

[Moshe Flam]

@Fran-Diox said:

uld certainly do that but I think it would be easier to use the o

whew! It’s up there under “control”. I should have looked for it although failed to find button-bar… Thanks!!!

[Moshe Flam]

Maybe you can tell me why the example isn’t working in the codepen?
https://codepen.io/pashute/pen/YrxxPX?editors=1111

Am I using a wrong CDN?

[Fran Diox]

@Moshe-Flam Yes, update Vue version :)

[Moshe Flam]

@Fran-Diox said:

version

Thank you!! works!