带有 VUE vue-onsenui v-ons-segment 的 OnsenUI 不起作用。为什么？答案

【问题标题】：OnsenUI with VUE vue-onsenui v-ons-segment not working. Why?带有 VUE vue-onsenui v-ons-segment 的 OnsenUI 不起作用。为什么？
【发布时间】：2018-03-21 07:15:15
【问题描述】：

带有 VUE vue-onsenui v-ons-segment 的 OnsenUI 没有正确显示，我得到的是标准按钮，而不是连续的按钮栏。

代码位于带有最小 VUE 模板的修改后的 Monaca CLI 项目中，在 .vue 文件中：在 page2.vue 中，我还尝试将 App.vue 中的代码替换为相同的结果。

代码是：

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

根据文档，它应该是这样的：https://onsen.io/v2/api/vue/v-ons-segment.html

这是我得到的结果的屏幕截图：

顶部的工具栏是一个 v-ons-toolbar 和 v-ons-back 按钮，所以 vue-onsenui 可用。

为什么它不起作用？

我正在使用 Monaca 2.4.1
节点：8.5.0
NPM：5.4.2
vue-onsenui: 2.0.0

【问题讨论】：

标签： css vue.js vuejs2 segment onsen-ui2

【解决方案1】：

只需将onsenui 和vue-onsenui 依赖项升级到最新版本。 Changelog here.

【讨论】：

在我写的目录中 npm update onsenui 和 npm update vue-onsenui 花了大约一分钟完成（没有输出）并且仍然看到相同的行为......或者你在谈论其他方式更新？在更新日志中没有提到 VUE 版本。在 2.3.0 中有一些关于段的内容，在 2.6.0 中他们添加了ons-segment 和角度绑定...
在根目录运行npm outdated，你会看到当前和最新版本是什么。打开 package.json 并更改必要的数字以匹配所有这些依赖项中的最新版本。
成功了！然后我尝试使用div class="ons-segment"，它不起作用，但v-ons-segment 运行起来就像一个魅力。