Display Vue component depending on specified attribute

I have a block of code that I am working with:

<div>
  <b-card no-body>
    <b-tabs pills card vertical no-key-nav v-model="step">
      <b-tab title="Subject" v-for="animal in animals" :key="animal" v-show="animal=1">
        <b-card-text>
          <enrollment-form>
          </enrollment-form>
        </b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

My goal is to display one component at a time, but currently all tabs are being rendered simultaneously. I had planned to use buttons to increment the "step" value as input is received.

EDIT

Data provided below
  data: () => {
    return {
      step: 2,
      animals: Array(3),
    }
  },
javascriptvue.jsfrontendbootstrap-vue

Answer №1

Avoid using v-show together with v-for in the same element and opt for comparison over assignment :

  <b-tab title="Subject" v-for="animal in animals" :key="animal" >
        <b-card-text v-show="animal==1">
          <enrollment-form>
          </enrollment-form>
        </b-card-text>
      </b-tab>

Update your data section as follows :



  data: () => {
    return {
      step: 2,
      animals: [...Array(3)].map((_,i)=>i+1),
    }
  },

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 make the image above change when I hover over the thumbnail?

Seeking assistance with JavaScript to enable changing thumbnails on hover. As a newcomer to JavaScript, I'm struggling to grasp how to achieve this effect. I've already implemented fancybox for gallery functionality. Below is the HTML and CSS f ...

javascriptjqueryhtmlcssfancybox

Issues with the directory for Chrome

Currently, I am utilizing jQuery and running an HTML file on my local machine without a server. Interestingly, the code works perfectly fine on Firefox but encounters issues on Chrome: $('#result').load('test.html'); It appears that t ...

javascriptjqueryajax

jQuery Accordian malfunctioning for all elements except the first one in the list

Trying to implement an accordion feature that can be utilized across the entire website. The current logic seems to be partially functional... When I click on any of the accordions, it should open by adding a 'show' class, but this only works for ...

javascripthtmljquerycss

Unable to access variables beyond the function scope results in an undefined value

I'm currently working with an npm package that shortens URLs but I'm struggling because there isn't much documentation available. The package takes the "this.src" URL and shortens it, but when I try to use the "url" element in HTML, it retur ...

javascriptvue.jsvuejs2vue-componentthis

Rejuvenate your Bootstrap Accordion with these Settings

Using bootstrap documentation, I have implemented an accordion in my web application with the following code: <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class=" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

What is the reason for the reconnect function not activating when manually reconnecting in Socket.IO?

After disconnecting the client from the node server using socket.disconnect(true);, I manually re-establish the connection on the client side with socket.open(). The issue arises when triggering socket.open(); the socket.on('reconnect', (attempt ...

javascriptnode.jssocket.io

What is the process for getting the input value when a key is released?

My goal is to capture the actual value or text from an input field and store it in a variable. However, when I use the console to check the output, it shows me a number indicator that increments each time I type something. <input id="usp-custom-3" ty ...

javascriptjquery

Double-Image Display: Ennui Content Slider showcasing dual images simultaneously

Hey there! I am attempting to utilize the Ennui Content slider in order to showcase two images for each sequence of images. If you're interested, here is the link to the slider: I'm a bit unsure about what modifications or steps I need to take ...

javascriptjquery

Nuxt middleware's redirect function is causing the state to become null

My Nuxt app has a middleware issue where everything works fine except when the redirect function is used. When I comment out the line with redirect('/admin') it functions properly, even showing state data in the console log. But as soon as I unco ...

firebasevue.jsauthenticationjwtnuxt.js

Actions for jQuery's mouseenter and mouseleave events

I've implemented a jQuery script that controls the visibility of elements based on mouse events: $("#divid").mouseenter(function() { $('#divid').show(1000); }).mouseleave(function() { $('#divid').hide(1000); }); $("#hldiv" ...

javascriptjqueryonmouseoveronmouseoutonmouseup

Failure to establish connection between electron/socket.io client and python-socketio/aiohttp server

My websocket connection is failing at the moment, even though it was working perfectly just a couple of days ago. I attempted to fix the issue by downgrading electron from version 6 to 5.0.6, but unfortunately, this did not resolve the problem. https://i. ...

javascriptpythonwebsocketelectronaiohttp

React.js "universal" component that is able to be generated multiple instances of

I'm struggling to fully understand this problem. Here's the issue: imagine there is an app where I need to generate notifications, dialogs, or other similar elements from my code. One option is to have a "global" component that controls everyth ...

javascriptreactjs

Should You Ajaxify Your Website?

Absolutely loving the way Ajax can transform a web app into something that performs like a desktop application. The concern, however, arises when dealing with high volume sites. Currently working on an intranet-based database app meant for only 2-4 users a ...

javascriptajaxasynchronousscaling

Can someone show me how to code a function that transforms my paragraph into an image when I hover over it?

< p id="p1" onmouseover="this.style.color='transparent';flipPara()"> < p id="p2" onmouseover="spookyPara()"> function spookyPara() { document.getElementById("p1").attribute = "All_Images/ghost.png"; } I currently have this code sn ...

javascripthtmlcssimagefunction

Is the custom attribute event being triggered too soon?

My Unique Component Creation Journey I have meticulously crafted a custom component to enhance the navigation of my application. The core structure consists of an ul element, with each li item dynamically generated based on the contents of the router&apo ...

javascriptaurelia

What is the best way to transfer values from an AJAX script to the rest of the Javascript code?

Currently, I am diving into the world of a django 2.0 template along with a third-party jQuery script used for tagging photos and my own JavaScript code that acts as the "glue." Despite being new to JavaScript and JQuery, I managed to make a successful aja ...

javascriptjqueryajaxdjango

Looping through components using the render template syntax in Vue3

Below is my Vue3 code snippet: <template> {{click}} <ol> <li v-for="item in items" :key="item" v-html="item"></li> </ol> </template> <script setup> const click = ref(); const items = ...

javascriptvue.jsvuejs3

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

javascriptandroidjqueryhtmljquery-mobile

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Looking for suggestions on how to efficiently transfer data from a Python script to a web browser. The Python script, as well as the browser, are operating under an xServer environment in Linux (specifically Raspbian on Raspberry Pi). The script is respon ...

javascriptpythonlinuxhtmlxserver

Avoid unnecessary re-renders in ReactJS Material UI tabs when pressing the "Enter

I've created a user interface with tabs using material-ui in reactJS. The issue I'm facing is that every time a tab is selected, the content under that tab reloads, causing performance problems because there's an iFrame displayed in one of t ...

javascriptreactjsmaterial-ui