Animations are failing to run within a Bootstrap card when using Vue rendering

I have utilized Bootstrap cards to display pricing information in my project. I implemented a collapse feature for half of the card when the screen size is equal to mobile width. While using vanilla Bootstrap, the animation worked seamlessly with the collapsing class as expected. However, after converting my project to Vue JS, the collapsing class stopped functioning entirely. The project is built entirely on Bootstrap and I have integrated a jQuery plugin into Vue. Below is a snippet of my code.

    <template>
    <div>
        <div class="prices">
           <div class="container">
              <h1 class="comfortHeader" id="comfortHeader" style="margin-bottom: 50px;">Our Prices</h1>
              <div class="d-flex row no-gutters justify-content-center">
                 <div class="card text-center mt-3" v-for="(price,i) in pricing" :key="i" id="body-collapsed">
                    <div class="card-body">
                       <h5 class="card-title">10 Lessons</h5>
                       <h5 id="biggerSize" class="card-title" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1,600 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">per lesson</p>
                       <p class="card-text">Total Payment: 16,000 KZT </p>
                       <button class="SeeTheCourse mt-5">Start Learning</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="'#collapseOne'+i"
                          aria-expanded="false"
                          aria-controls="collapseOne"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                      >
                       <span class="fa fa-chevron-down pull-bottom"></span>
                       </a> 
                       <div id="collapseOne"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed">
                          <transition-group name="list">
                             <div v-for="(subItem,j) in price.items" :key="j">
                                <p id="lowerbodyparagraph" class="card-text">{{subItem.price1}}</p>
                                <p id="lowerbodyparagraph" class="card-text">{{subItem.price2}}</p>
                                <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;" >{{subItem.price3}}</p>
                             </div>
                          </transition-group>
                       </div>
                    </div>
                 </div>
                 <div  v-for="(price,i) in pricing" :key="'k'+i" class="card text-center mt-3" id="body-collapsed2">
                    <div class="card-body">
                       <h5  class="card-title" >30 Lessons</h5>
                       <h5 id="biggerSize" class="card-title d-inline-block" style="font-weight: bold; padding-bottom:5px;padding-top:15px;">1,300 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">per lesson</p>
                       <p class="card-text">Total Payment: 39,000 KZT </p>
                       <p class="economyTariff">Save 9,000 KZT</p>
                       <button class="SeeTheCourse">Start Learning</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="`#collapseTwo+${i}`"
                          aria-expanded="false"
                          aria-controls="collapseTwo"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                         >
                       <span class="fa fa-chevron-down pull-bottom fa-md"></span>
                       </a>
                       <div id="collapseTwo"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed2">
                          <div v-for="(subItem,j) in price.items" :key="'l'+j">
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price4}}</p>
                             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price5}}</p>
                             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">{{subItem.price6}}</p>
                          </div>
                       </div>
                    </div>
                 </div>
                 <div  v-for="(price,i) in pricing" :key="'p'+i" class="card text-center mt-3" id="body-collapsed3">
                    <div class="card-body">
                       <div class="sale">
                           Best Choice!
                       </div>
                       <h5 class="card-title">60 Lessons</h5>
                       <h5 id="biggerSize" style="color: #2FAFE5;font-weight: bold; padding-bottom:5px;padding-top:15px;" class="card-title">1,000 <span class="fas fa-tenge d-inline-block"></span></h5>
                       <p id="card-height" class="card-text">per lesson</p>
                       <p class="card-text">Total Payment: 60,000 KZT</p>
                       <p class="economyTariff">Save 16,000 KZT</p>
                       <button class="SeeTheCourse">Start Learning</button>
                       <a class="collapsed d-lg-none d-md-block" 
                          data-toggle="collapse"
                          :data-target="`#collapseThree+${i}`"
                          aria-expanded="false"
                          aria-controls="collapseThree"
                          href="javascript:;"
                          @click.prevent="navItemCollapse(i)"
                          >
                       <span class="fa fa-chevron-down pull-bottom"></span>
                       </a>
                       <div id="collapseThree"  v-if="price.items.length>0" class="collapse d-lg-block" :class="{show: price.expand}" aria-labelledby="body-collapsed3">
                          <div v-for="(subItem,j) in price.items" :key="'k'+j">
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price7}}</p>
                             <p id="lowerbodyparagraph"  class="card-text">{{subItem.price8}}</p>
                             <p id="lowerbodyparagraph" class="card-text">{{subItem.price9}}</p>
                             <p id="lowerbodyparagraph" class="card-text" style="border-bottom: none;">{{subItem.price10}}
        </p>
                          </div>
                       </div>
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
    
    
    <script>
   import $ from 'jquery'
   export default {
     data(){
   return{
     pricing: [{
            name: 'price1',
             expand: false,
              items: [{
          id:1,
          price1:"10 online lessons",
          price2:"Interactive tasks",
          price3:"Unlimited access to materials",
                 price4:"30 online lessons",
          price5:"Interactive tasks",
          price6:"Unlimited access to materials",
             price7:"60 online lessons",
          price8:"Premium support",
          price9:"Feedback",
          price10:"Unlimited access to materials"
               },
   
   
             ]
   
             }
   
         ],
   }
   }
   methods: {
       navItemCollapse(index) {
         this.pricing = this.pricing.map((item, i) => {
           item.expand = !item.expand
           if (i !== index) {
             item.expand = false
           }
           return item
         })
       },
   
   
   
   },
   }
</script>
javascriptcssvue.jsbootstrap-4

Answer №1

Upon testing your code in my development environment, I observed a couple of issues. Firstly, you forgot to close the <template> tag. Also, in the data() section of your script, remember to use a , after defining each property.

After making these revisions, I integrated bootstrap and jQuery into my main.js file as shown below:

import 'bootstrap/dist/css/bootstrap.min.css'

import 'jquery/src/jquery.js'

import 'bootstrap/dist/js/bootstrap.min.js'

I've also commented out the <transition-group> tag due to an encountered warning. The span tags used were replaced with text. Below is the complete Vue component I'm working with:

<template>
    <div>
        // Your template content here...
    </div>
</template>
    
    
<script>
   export default {
     data(){
   return{
     pricing: [{
            name: 'price1',
             expand: false,
              items: [{
          id:1,
          price1:"10 online lessons",
          price2:"Interactive exercises",
          price3:"Unlimited access to materials",
                 price4:"30 online lessons",
          price5:"Interactive exercises",
          price6:"Unlimited access to materials",
             price7:"60 online lessons",
          price8:"Premium support",
          price9:"Feedback",
          price10:"Unlimited access to materials"
               },
   
   
             ]
   
             }
   
         ],
   }
   },
   methods: {
       navItemCollapse(index) {
         this.pricing = this.pricing.map((item, i) => {
           item.expand = !item.expand
           if (i !== index) {
             item.expand = false
           }
           return item
         })
       },
   
   },
   }
</script>

On mobile screens, the a tags are displayed correctly, and the collapse functionality works fine. However, I noticed that there is no animation, which could be due to missing CSS styles from your end!

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

The AJAX validation process fails to run prior to the execution of the login PHP script

My attempt to implement AJAX for form validation is not successful and I'm unsure why. Despite my efforts, the form still redirects to login_action.php instead of performing the AJAX validation as intended. I have designed a modal login form and wish ...

javascriptphpajax

The animated image gracefully glides down the webpage accompanied by an h3

How can I align an image and h3 tag side by side without the image sliding down? <img src="..." alt="..." /><h3>Shopping Cart</h3> I need them to be next to each other but the image keeps moving down. Any suggestions on how to fix this? ...

htmlcssxhtml

Only dispatch to props upon being clicked

I am encountering an issue with the mapDispatchToProps function being sent as a whole, rather than only when I click on the delete button. My class successfully fetches the list data and everything works as expected. However, upon adding the delete button ...

javascriptreactjsreduxreact-redux

Utilizing API data to set the state in a React component

In my quest to modify the state of this React component, I have a variable called rankAndTeam that holds the "prints=>" data listed below. My goal is to assign "Washington Capitals" to this.state.teamRank["0"], "New York Islanders" to this.state.teamRank[" ...

javascriptnode.jsreactjs

What are some solutions for resolving the issue of a neutralino white screen?

After setting up a new neutralino js application, I encountered an issue where upon running it with the 'neu run' command, all I see is a blank white screen. I tried using the CheckNetIsolation.exe ... command to troubleshoot the problem, but unf ...

javascriptnode.jsneutralinojs

What is causing the Bootstrap accordion to not display content when clicked on?

As a beginner in web development, I am currently working on my very first website. One issue I'm facing is with incorporating an accordion-style card in my webpage. Although it allows me to click on different titles, the collapsed ones fail to expand ...

htmlcssbootstrap-4

When JSON.stringify is used to convert an object to JSON, it will result in

I'm having difficulty creating a JSON object for transmission over the network. The particular array I'm dealing with looks like this in the Chrome debugger. event: Array[0] $$hashKey: "02Q" bolFromDB: 1 bolIndoor: null ...

javascriptjson

Using both CASE and MATCH operators within an array in Neo4j's Cypher Query Language (

Using the code snippet below, I am attempting to retrieve all details related to user data where the checked value is either 1 or 0. I have noticed that 'WHERE flight.checked IN check' does not seem to be properly working. Is it appropriate to u ...

javascriptangularjsneo4j

JQuery is unable to initiate a keyup event

I am currently utilizing jQuery in a web application. On one of my pages, I have set up an event listener for keypresses as shown below: document.addEventListener('keyup', function (event) { event.preventDefault(); var key = event.k ...

javascriptjqueryeventstriggerslistener

Transition from traditional class-based components to functional components

I am utilizing the ref from the parent class to access the child class. However, in this scenario, I want to access the child functional component from the parent class. In the parent class: class Waveform extends Component { constructor(props){ s ...

javascriptreactjsreact-ref

Utilizing a dropdown selection feature in VueJS to dynamically adjust text color

I need to implement a feature that changes the color of text based on the selection from a drop-down menu in my TODO List project. The drop-down menu consists of three options: High Urgency (text turns red), Medium Urgency (text turns yellow), and Low Ur ...

vue.jsdrop-down-menuvuejs2vue-cli

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

What could be causing the failure of the JSON parse for dynamic link parameters?

I am currently attempting to pass parameters to a dynamic page within an Amplify/NextJS application. This is still a work in progress. My objective is to utilize the passed parameters to generate a basic page based on 4 parameters included in the URL invo ...

javascriptnext.jsaws-amplify

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

javascriptjqueryhtmlsqlknockout.js

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

Tips for showcasing cards in a horizontal inline layout

Hello everyone! I'm currently working on creating dynamic cards, but I'm having trouble displaying them inline. I'd like to arrange the cards horizontally with a scroll bar. I want to make them display in horizontal line <div className=& ...

htmlcssreactjsfrontend

How to Convert Pixel Units to Rem and Em in CSS?

Until recently, I developed my website exclusively using pixels, which has made it less responsive than I'd like. Is there a method to efficiently convert pixel measurements to rem/em units, allowing for quicker and easier modifications? ...

cssresponsive-design

Converting an object to JSON in javascript: A step-by-step guide

I have been attempting to convert my object person into a JSON format. const person = new Object(); person.firstName = 'testFirstName'; person.lastName = 'testLastName'; var myJson = JSON.stringify(person); ...

javascriptjson

Using Javascript to extract information from the div element

Within my HTML code, I have a total of 4 <div> tags and a corresponding <a> tag for each of these <div> tags. Inside each div tag, there are 2 span tags and an additional a tag. Upon clicking the a tag, I aim to extract the product name ...

javascriptjqueryhtml

D3.js is providing inaccurate tick numbers

Even though I specify that I want 3 ticks, I end up with 4 in my d3 js code The y-axis values I am working with are [2, 1, 3, 2, 4, 4, 6] svg .select(`[data-labels-y]`) .call(d3.axisLeft().scale(yScale).ticks(3).tickPadding(4))` My expected tick valu ...

javascriptreactjsalgorithmd3.js