Learn how to establish the active tab in Vue

Can anyone help me with setting the active tab in my Vue tab component? I have it logging out the correct index of the selected tab, but I'm unsure how to actually show that tab as open. Any guidance would be greatly appreciated.

Component:

<Tabs
      :tabs="tabs"
      :active-tab-index="activeTab"
      @tab-changed="changeTab"
    />
    

Markup

<div v-show="activeTab === 0">
        Show tab one content
    </div>

    <div v-show="activeTab === 1">
        Show tab two content
    </div>
    

Data:

data() {
        return {
            tabs: [
                { id: 0, name: 'Tab One' },
                { id: 1, name: 'Tab Two' },
            ],
            activeTab: 0,
        }
    },
    

Method:

changeTab(index) {
        console.log('Change activeTab', index)
    },
    

Answer №1

The location of the method and data is not entirely clear to me, but my assumption is that it resides in the parent component. In such a case, you would only need to modify the function like so:

changeTab(index) {
  this.activeTab = index
},

Your component could be made even more streamlined by providing an option to use v-model on it, for example:

v-model:activeTabIndex="activeTab"
. To achieve this, you would simply emit the data within the component using update:activeTabIndex instead of tab-changed.

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

globalThis undefined following git hiccup

While working on a web app in React, I followed a certain guide to execute Python code successfully within the app. However, during a git operation, I accidentally added unnecessary files like node_modules and package lock files, which led me to delete ev ...

retrieving JSON data using ajax and processing it in PHP

I have some data that needs to be sent to the backend, and it looks like this: function view(){ let id = "12345678"; let profile = [{name:"dave", department : "Engineering"}, {name:"Tedd", ...

How can I send dynamic props between pages using Next.js?

I am currently exploring Next.js and attempting to create a page (index.js) that fetches data about different countries and then displays this information. I would like each country element displayed on the page to have a button that leads to another page ...

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

https://i.sstatic.net/oqRwR.jpg In the image above, I need to adjust the position of the textbox to align it with the TextArea. Is there a Bootstrap class that can help me achieve this? My current version of Bootstrap is 3.3.6. HTML &l ...

Eliminate unnecessary spaces in Vue with Moment

Utilizing moment in this way: pages/index.vue <template> <div class="box"> {{ item.updateDate | moment("from", "now") }} </div> </template> An illustration of item.updateDate would be 1580564625000. I'm empl ...

How can I interact with a v-dialog component within a child component in Vue.js using Vuetify?

Exploring Vue.js for the first time and hoping to display a login dialog upon button click. To maintain cleanliness in my code, I shifted the dialog to a child component within a parent component with nested LoginDialog. Below are snippets of the parent co ...

The modifications made to the input type="time" in View do not get updated in the Model within Angular

I have been attempting to validate the input type "time", but I am encountering an issue where changes in the view are not reflected in the model if any of the input fields are left empty. For example: https://i.sstatic.net/1U0sO.png When a user change ...

How can you prevent a tag from firing in Google Tag Manager by identifying a particular script included in the HTML code

Seeking advice on modifying our Google Tag Manager container as I am a novice when it comes to GTM. Encountering an issue with IE8 on pages utilizing Fusion Charts resulting in a javascript error in gtm.js. Upon investigation, it appears to be related to a ...

Is event delegation in React similar to jQuery's `on()` method?

Just starting out with React.js and I've built a list Component that has items being added and removed frequently. Each item needs to have click and/or hover events. I'm looking to implement event delegation similar to how it's done in jQue ...

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

What causes the order of `on` handler calls to be unpredictable in Angular?

Below is the code snippet I have been working on function linkFunc(scope, element, attr){ var clickedElsewhere = false; $document.on('click', function(){ clickedElsewhere = false; console.log('i ...

Using Highcharts to dynamically color a map based on data values in a React TypeScript project

I'm attempting to generate a map where each country is filled with colors based on its specific data, similar to the example shown in this map. I am looking for a functionality akin to the use of the formatter function within the tooltip. I have expe ...

Anticipating the fulfillment of promises with the power of Promises.all

I have adopted the code found here for loading multiple .csv files. Upon successful loading of these files, my intention is to then render a react component. Below is the method located in datareader.js that I am currently working with. I am exploring the ...

Discover Xml information or Json object displayed as XML tree in Html using Javascript

Looking for a way to display my JSON object or XML data in HTML similar to how React does it. I found this component on GitHub: https://github.com/marushkevych/xml-display-component, but I prefer not to mix JavaScript and React.js. Can anyone offer some gu ...

Unspecified data stored within an object

I am looking to populate a page with data from the server and have the ability to update the information. To achieve this, I am using formbuilder to fetch data from the server as the default value. Here's how I am implementing it: createForm(){ ...

What is the best way to display converted value in Angular 8?

In my current project, I am utilizing .NET Core 2.2 for the backend and Angular 8 for the frontend. The scenario involves having integer values on the backend within a specified range. For example: [Required] [Range(1073741824, 1099511627776)] // ...

What is the best way to include a new user in my list of friends within the User schema?

Working on my customized social media platform, I have implemented a feature where users can send friend requests by clicking on a button. <form action="/requests" method="POST"> <input type="hidden" name="send ...

JavaScript for beginners: show a specified amount of search results and insert a loading indicator at the end

Currently, I have a website that retrieves data from my database using a PHP query. However, the issue I am facing is that there are over 300 entries in my database, resulting in an excessively long displayed page. My main question: How can I restrict ...

Setting default values for dropdowns in ng-repeat using AngularJS

I am working with an array of objects that have three properties: attorneyId, attorneyName, and attorneyList. The attorneyList should be displayed as a dropdown menu. If both attorneyId = null and attorneyName = null, then the dropdown will only show Choos ...

Encountering a problem with the getJSON() function within the app.js file connected to a solidity

Currently, I am working on developing a simple dapp in Truffle. However, I encountered an error when using $.getJSON() function in my app.js file. Below is a snippet of my app.js: App ={ web3Provider: null, contracts: {}, init: function (){ return A ...