Is there a reason why the integration of OnsenUI with Vue using vue-onsenui and v-ons-segment is not functioning

I am experiencing an issue with OnsenUI and VUE vue-onsenui v-ons-segment. Instead of displaying a button bar in a row as expected, I am seeing standard buttons.

The problematic code resides in a customized Monaca CLI project utilizing the minimal VUE template, specifically within a .vue file named page2.vue. I also attempted replacing the code in App.vue but encountered the same outcome.

Here is the code snippet:

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

Based on the documentation, the output should resemble this example:

Attached here is a screenshot showcasing the unexpected result:

The top toolbar features a v-ons-toolbar with a v-ons-back button indicating that vue-onsenui has been successfully implemented.

What could be causing this issue?

My current environment includes: - Monaca 2.4.1 - Node: 8.5.0 - NPM: 5.4.2 - vue-onsenui: 2.0.0

Answer №1

To resolve this issue, make sure to update your onsenui and vue-onsenui dependencies to the most recent version available. You can find the detailed changelog here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes an image's size to change when it floats within the parent container?

There seems to be a height mismatch issue between the container and the image inside it when the parent is floated, but not the child. However, when both are given the float property, the height matches perfectly. Why is this? <div class="parent">&l ...

changing size when hovered over with the mouse is not consistent between entering and exiting

Hi there, I'm currently utilizing the transform: scale(); property on a website and could use some assistance with a particular issue I haven't been able to find an answer for online. Here is the code snippet I'm working with: HTML: <d ...

Adjust SVG size to fit parent container/division

I am trying to make the SVG completely fill the containing TD. I don't care about preserving the proportions of the SVG. Instead, I want the height of the SVG to be the same as its width when the height should be larger than the width. There is paddin ...

How come my image is not appearing on Vue.js when fetched from the API?

While working on my laravel vue project, I encountered an issue where the image is not being fetched from the backend API. All other data is being displayed correctly except for the image. JSON: [ { "id": 1, "name": ...

Determine the precise x and y coordinates of a centered element using JQuery

How can I determine the exact left and top positions of an element? The parent container has text-align: center, causing potential confusion when there are multiple elements on the bottom row. For instance, the first one may have a position of 0px instea ...

What could be preventing me from updating data using a Vuex module?

Hello, this is my custom component code: methods:{ ...mapActions(['updateUsers']), Update(userID){ let formData = new FormData(); formData.append('new_name',this.editUser.new_name); ...

Turn off slider trace animation?

Check out the slider component in MUI here: https://mui.com/material-ui/react-slider/ I'm currently exploring how to disable the animation on the nub so it moves instantly to the new position. Any advice on how to achieve this? ...

Nuxt - asyncData ISSUE: "Variable '$axios' is inferred to have an 'any' type."

Referencing the guidelines provided at Encountering an error logged in console while executing yarn dev: ERROR ERROR in pages/index.vue:51:21 ...

Eliminate the gaps between the columns of the table

Is there a way to eliminate the gap between the day, month, and year columns in this table? <form action='goServlet' method='POST'> <table style="width:1000px" style="text-align:center"> <tr style="text-ali ...

Assigning objects in Vue.js methods

I am working on a Vue component where I need to select a specific value from an array of objects and then copy certain fields from that value into Vue data. <div class="container"> <h4>Add Item</h4> <form @submit.prevent="ad ...

How to disable items in Vuetify's v-select without having to modify the object

After searching extensively, I have only come across information in the official documentation indicating that v-select's items can be disabled by setting the object's disable property to true as shown below: {text: 'text1', disabled: t ...

Launch a web application utilizing a node.js server hosted on Firebase

I am currently developing a web application using Vue. In this app, I have integrated "pusher" for real-time multi-user communication. I have set up a node.js server on port 5000 of a specific device within my local network. The app functions smoothly with ...

Encountered an Error While Compiling GeoJson File in Vue

I'm a beginner with Vue.js and I am trying to create a GIS application using Webpack+Vue with a GeoJSON file as the basemap. However, when I attempt to compile it, I encounter the following error message: Module parse failed: Unexpected token (2:6) ...

What could be causing appendChild to malfunction?

I'm having an issue trying to create three elements (parent and one child) where the third element, an <a> tag, is not appending to modalChild even though it's being created correctly. modal = document.createElem ...

What is the best method for transferring properties to the parent component using Vue router?

I have a multi-step form that each step has a different header structure. The only variation in the header among the steps is the wording, which changes as you progress through the steps. I am looking for a way to achieve this using Vue Router: pa ...

Insert the picture into an HTML document and retrieve the image file location

I successfully used <input type="file" accept="image/*"> to upload an image and then applied base64 encoding of the image in the onload callback function of a FileReader instance. However, I encountered a problem when trying to assign this base64 enc ...

The Bootstrap data-target and aria-controls attributes are failing to activate the designated id element

I have implemented various elements to toggle the display of information on my HTML website. While I've successfully created buttons, nav-tabs, and modals, clicking on the trigger element doesn't reveal the associated content. I've even doub ...

Is it possible to position my label above my text box input?

Having trouble aligning the checkbox label with the edge of the text area in my login form code. It always ends up on the right side, outside of the div container when inspected. I've attempted setting a left value for the label, but it causes issues ...

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

My website includes a <div> section that features both an image and a <figcaption>. However, when I attempt to apply padding to the <figcaption>, it does not seem to take effect

I've been trying to troubleshoot this code, but the padding just won't cooperate and I can't seem to figure out why. .img-caption { visibility:hidden; width:22%; height:435px; background-color:#f9f4e3; ...