Issue with Nativescript tab view not functioning as expected

I have encountered a bug while manually trying to change tabs. The issue arises when the tab index changes but the tabs themselves do not update accordingly. In order to demonstrate this problem, I have created a NativeScript Playground app where you can observe the issue in action. You can access the playground app via this link: To replicate this bug, simply press the "Field" tab, then click on the "Go to profile" button, go back to the "Field" tab once more, and then try clicking the "Go to profile" button again. You will notice that the tab does not change as expected.

javascriptvue.jsnativescript

Answer №1

It's not a bug, but rather an expected behavior. Your binding on selectedIndex is one way, meaning you are not monitoring changes from the TabView.

Therefore, when you switch to the "Field" tab by tapping on the tab header, the value of selectedIndex remains 2. Clicking on the GO TO PROFILE button will attempt to change the value to 2, but since the variable's value is already 2, the change detection won't occur.

To resolve this issue, you should listen for the selectedIndexChange event and update the variable accordingly.

            <TabView :selectedIndex="selectedIndex" @selectedIndexChange="selectedIndex = $event.value">
                <TabViewItem title="home">
                    <StackLayout>
                        <Button text="go to fields" @tap="selectedIndex = 1"></Button>
                    </StackLayout>
                </TabViewItem>

                <TabViewItem title="Field">
                    <StackLayout>
                        <Button text="go to profile" @tap="selectedIndex = 2"></Button>
                    </StackLayout>
                </TabViewItem>

                <TabViewItem title="profile">
                    <StackLayout>
                        <Button text="go to home" @tap="selectedIndex = 0"></Button>
                    </StackLayout>
                </TabViewItem>
            </TabView>

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

Is there a way to transform individual data into a collective group dataset?

Here is the input data provided: data = [ { name: "John Cena", groupName: "WWE" }, { name: "Nandini", groupName: null }, { name: "Rock", groupName: "WWE" }, { name: "Vinay", groupName: null }, { name: "Rey Mesterio", groupName: "WWE" ...

javascriptarraysjsontypescript

Remove several elements from an array within the state of a React component using values from a second array

Here is an array let removed = [ {id: '123', name: 'Something'}, {id: '321', name: 'Something1'} ]; and I also have this piece of code this.setState({ config: { ...this.state.config, ...

javascriptarraysreactjs

Revamp the style of the date field in a Material UI dialog

I'm currently working on a React project where I am using Material-UI's date picker component to display date items. However, I find that the default style does not meet my requirements. I would like to use a selector for displaying dates in the ...

javascriptreactjsdatepickermaterial-ui

Executing all middleware within an express route

Currently, I am in the process of constructing an API using express and have implemented multiple middleware functions in my routes. One of the endpoints I am working on is displayed below: Router.route('/:id/documents') .get([isAuthenticated, ...

javascriptexpressroutesmiddleware

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui

Concealing the text input cursor (caret) from peeking through overlaid elements on Internet Explorer

Currently, I am facing an issue with a form that includes a unique widget. This particular widget automatically populates a text input when it is in focus. The problem arises when the widget appears above the text input as intended. In Internet Explorer ...

javascripthtmlcssinternet-explorerdom

Changing the hover color of an Angular Material MD Button

<div class="non-active" layout layout-align='space-around center'> <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == ' ...

javascriptcssangularjsangular-materialsaas

Updating a database seamlessly via a dropdown menu without having to refresh the entire webpage

Before we proceed, please take a look at the following code: $(document).ready(function() { $("#alternatecolor [type=button]").each(function() { $(this).on('click', function() { btnObj = $(this); rowId = $(this).attr("rowId") ...

javascriptphpmysql

Execute action based on local state when component is unmounted in React

I have encountered an issue with a component's internal state not being properly propagated throughout the application, specifically under certain events. const FunComponent = (initialDescription, onSave) => { const [description, setDescription] ...

javascriptreactjsreact-hooks

The error message being displayed states that 'null' cannot be used as an object when evaluating 'response.productType'

Hey everyone, I'm fairly new to working with Ajax and I've encountered an error in my code that says: TypeError: 'null' is not an object (evaluating 'response.productType'). I'm not sure why this is happening. Below is th ...

javascriptjqueryajax

I'm having trouble sending registration emails through my server. What could be causing this issue?

Currently, I am in the process of developing a registration system that automatically sends an email with the user's username and password once they have successfully registered. The registration process functions smoothly up until the point where the ...

javascriptnode.jsnodemailer

Ensure the http request is finished before loading the template

When my template loads first, the http request is fired. Because of this, when I load the page for the first time, it shows a 404 image src not found error in the console. However, after a few milliseconds, the data successfully loads. After researching a ...

javascriptjqueryangularjsangular-ui-router

Implement a dropdown menu in Vue.js using data fetched from an ajax request

I am looking to utilize ajax calls in conjunction with vue.js to dynamically populate the options for a drop-down menu. Here's an example of what I currently have: <select v-model="selected"> <option v-for="option in options" v-bind:valu ...

javascriptvue.jsvue-component

JavaScript post method for JSON data: no input or output values

I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...

javascriptphpjqueryhtmljson

Accessing the admin panel of a headless CMS using Nuxt.js and WordPress

I'm facing an issue. I recently set up Wordpress and enabled the REST API. Following that, I created a Nuxt.js app. The app runs on localhost:3000 (using "npm run dev" command) I configured XAMPP so that the document root of the server points to the ...

phpwordpressvue.jsnuxt.jswordpress-rest-api

What advantages does incorporating SSR with dynamic imports bring?

How does a dynamic imported component with ssr: true differ from a normal component import? const DynamicButton = dynamic(() => import('./Button').then((mod) => mod.Button), { ssr: true, }); What are the advantages of one method over the ...

javascriptreactjsnext.jsjsx

Create a unique functionality by assigning multiple event handlers to a single event

I am looking to add a JavaScript function to an event that already has a handler function. The new function should complement the existing one rather than replace it. For instance: There is a function named exFunction() that is currently linked to docume ...

javascript

What is preventing me from being able to import a React component from a file?

I've double-checked my code and everything seems correct, but when I view it on the port, only the app.js file is displayed. import React from 'react'; import ImgSlider from './ImgSlider'; import './App.css'; function ...

javascripthtmlreactjsjsx

Encountered a $resource configuration issue while making a request to the SharePoint REST service with Angular

In an old sample app without angularJS, a rest service is called in the following way: This app does not use angularJS. var listName = "Events"; // the url to use for the REST call. var url = SPAppWebUrl + "/_api/SP.AppContextSite(@target ...

javascriptangularjsrestsharepoint

javascript design pattern - achieving unexpected outcome

In the code snippet provided, the variable a is turning out to be undefined. Are you expecting it to display the parameter value passed in the parent function? function test(a) { return function(a) { console.log('a is : ' + a); // Ou ...

javascript