0

OnsenUI with VUE vue-onsenui v-ons-segment is not showing correctly, and instead of a button bar in a row, I'm getting standard buttons.

The code is in a modified Monaca CLI project with the minimal VUE template, inside a .vue file: in page2.vue, and I also tried replacing the code in App.vue with the same result.

The code is: 

<p style="text-align: center">This is the second page</p>
<v-ons-segment>
  <button>hi</button>
  <button>bye</button>
  <button>try</button>
</v-ons-segment>
<p style="text-align: center">and hello again</p>

According to the documentation, it should look like this: https://onsen.io/v2/api/vue/v-ons-segment.html

Here's a screenshot of the result I'm getting:

The toolbar on the top is a v-ons-toolbar with v-ons-back button so vue-onsenui is available.

Why is it not working?

I'm using Monaca 2.4.1
Node: 8.5.0
NPM: 5.4.2
vue-onsenui: 2.0.0

Phil
  • 157,677
  • 23
  • 242
  • 245
pashute
  • 3,965
  • 3
  • 38
  • 65

1 Answers1

0

Simply upgrade onsenui and vue-onsenui dependencies to the latest version. Changelog here.

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • In the directory I wrote `npm update onsenui` and `npm update vue-onsenui` took both about a minute to complete (with no output) and still see the same behavior... or are you talking about some other way of updating? In the changelog there's no mention of the VUE version. on in 2.3.0 there's something about a segment and in 2.6.0 they added `ons-segment` and angular binding... – pashute Oct 10 '17 at 03:09
  • Run `npm outdated` in the root directory and you'll see what are the current and latest versions. Open `package.json` and change the necessary numbers to match the latest of all of those dependencies. – Fran Dios Oct 10 '17 at 03:24
  • That did the trick !! I was then trying with `div class="ons-segment"` which does not work but `v-ons-segment` runs like a charm. – pashute Oct 12 '17 at 20:43