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

Enhance the progression bar using JavaScript

Is there a way to dynamically update a progress bar in HTML while a function is running? function fillProgressBar() { var totalIterations = 100; for (var i = 1; i <= totalIterations; i++) { //perform calculations progressBarWidth = (i/to ...

Progressing through the Material UI LinearProgress bar in steps

How can I split a progress bar into more steps to achieve a design like this? https://i.stack.imgur.com/lRMj6.png I attempted using this code but couldn't find an option for splitting: <LinearProgress variant="determinate" classes={{ ...

Incorporating VueJS into a complex WebForms project with multiple pages

I'm currently working on a webforms project and I would like to incorporate VueJS into it. However, I am facing challenges when trying to set up the root element. If I enclose my content within a <div id="app"></div> element and specify t ...

What is the best way to horizontally align an image beneath a navigation menu that is built using <ul> tags?

Seeking a way to center an arrow graphic under the selected item in a simple CSS drop-down menu? Considering using the :after selector, but currently being used for drawing dividing lines between menu options: HTML: <ul> <li>Option Zero&l ...

What is the most effective method for transferring and accessing data within a child form component?

This is how I am currently handling it: Parent.vue: // Template <form-child :schema="schema"><form-child> // JS data () { return { schema: [{ // name: '', value: '', type: '' }, { //etc ... }] } } For ...

What is the best way to add a `<div>` before or after a specific `<p>` element based on the client's height?

I am facing an issue with inserting a div before a paragraph element based on the given clientHeight. Specifically, I need to locate the closest paragraph element from the specified clientHeight and then add a div before or after that particular element. ...

Footer remains fixed and scrolls into the body when the window is resized

Having trouble with the footer's responsiveness when resizing the desktop window. It looks fine in developer tools, but in different browsers, the footer placement gets messed up and scrolls over the rest of the content. Any insights on what might be ...

Transforming react.js into HTML and CSS programming languages

I have a small experiment I need help with. As I am not familiar with react.js, I would like to convert my main.jsx file into pure HTML/CSS/JS without using react. The issue I'm facing is how to handle form data submission to the server in vanilla HTM ...

Creating bidirectional binding between a Vue.js instance and a custom native web component: A step-by-step guide

Here is an example showcasing a custom web component called my-input. The goal is to establish a binding between the value attribute of this custom input component and the email attribute of a Vue instance. (Please note that this example may require Chrome ...

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

Malfunctioning Line in Apple Safari Causing ReactJS Issues

I am encountering an issue with my <div className={`${classes.center} ${classes.or}`}>OR</div>. It appears that this problem is specific to Apple Safari only. The alignment on the right side seems to be broken, although it works fine on Google ...

Can you explain the distinction between Vue's 'v-on' directive and vue.$on method?

If I have two sibling components set up like this: <div id="root2"> <some-component>First</some-component> <some-component>Second</some-component> </div> ... and these components are coded as follows: Vue.comp ...

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

The z-index property does not seem to function properly when used in conjunction

I am experiencing an issue with the z-indexes of two divs: one with default positioning and the other with a fixed position. No matter how I adjust the z-index values, it appears impossible to make the fixed-positioned element go behind the statically pos ...

What could be causing the issue with my app not showing the API response correctly?

My API is finally retrieving the correct information from my SQLite database (at least I think it is). Here's the response I am getting when I simply use {{ vendor }}: [ { "id": 1, "vendor_name": "pip" }, { "id" ...

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

What is the best method for applying an active class to a particular element?

I have the following methods: methods: { replyBox: function(event){ event.preventDefault(); this.isActive = !this.isActive; ); }, In my view, I have this: <div class="comment_list" v-for="comme ...

Using Three.js to display a CSS3D-rendered DIV in full-screen mode

After extensively experimenting with the three.js library, I was able to establish two distinct scenes – one canvas-rendered and the other css3d-rendered – both displayed using the same perspective camera. Note: Despite my efforts, I am constrained to ...

When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

In my next.js project, I have developed a Container component with specific styles. As I incorporate this container component throughout the site, I aim to assign it a className for context-based styling. Illustrated below is an example of the Container c ...