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

Deliver the Express.js: transmit outcomes post next() invocation

I have a unique app feature that allows users to create their own routes in real-time. I also want to show a custom 404 message if the route is not found, so I added this code to my last middleware: app.use((req, res, next) => { // ...normal logic ...

javascriptnode.jsexpress

AngularJS does not allow access to the variable value outside of the resource service's scope,

I have developed an AngularJS factory service to handle REST calls. The service is functioning correctly, but I am facing a challenge where I need to set values into $scope.variable and access them outside of the resource service. However, when attempting ...

javascriptangularjsangular-promise

Creating a Bootstrap 4 DIV element with horizontal scrolling functionality

I've been struggling to implement a horizontal scroll for a DIV on my site, but none of the common solutions like overflow-x or white-space:nowrap are working for me. This is the section of my website where I need a horizontal scroll bar If you want ...

htmlcssbootstrap-4

Can ajax requests be made without a web browser?

Currently, I am in the process of developing JavaScript tests using mocha and chutzpah, which means conducting all my tests without a browser. However, I have encountered an issue where all my AJAX calls are resulting in empty strings. Even when using the ...

javascriptjqueryajaxmocha.jschutzpah

div added on the fly not showing up

I'm attempting to dynamically add a div to a webpage using Chrome. Despite following several instructional guides, the code does not seem to be working as expected. I have added style attributes to make it more visible, but the element is not showing ...

javascript

Ways to delete a property from an element that was originally included with jquery

On my jsp page, I am implementing a jQuery autocomplete feature for a text field with the id "mytextfield". jQuery(function(){ $("#mytextfield").autocomplete("popuppages/listall.jsp"); }); Sometimes, based on user input and pr ...

javascriptjqueryhtmljsp

Creating a dynamic link in Vue JS is a cinch!

I currently have the following code snippet: <b-dropdown text="Select Factory" block variant="primary" class="m-2" menu-class="w-100"> <b-dropdown-item @click="selectedFactory='China'"> ...

javascriptvue.js

A webpage layout featuring an HTML table enhanced with JavaScript functionality

Hi there, I'm new to Javascript and looking for a way to simplify my code. Is there a way to use a loop to change the id values in HTML without manually editing them one by one? Here's what I have so far: <table border="2" cellpadding="4"> ...

javascripthtml

ESLint detecting error with returning values in async arrow functions

Currently facing a minor inconvenience instead of a major problem. Here is the code snippet causing the issue: export const getLoginSession = async (req: NextApiRequest): Promise<undefined | User> => { const token = getTokenCookie(req) if (!t ...

javascripttypescript

Executing a REST call only when the previous one has successfully completed

Is there a way to execute a second REST request only after multiple successful responses from the first one? I have noticed that while in a normal state these requests are executed sequentially as required, issues arise when dealing with a large number o ...

javascriptjsonvue.jsrestaxios

The AJAX request seems to be malfunctioning despite the fact that both the PHP and JS files function correctly independently

I have set up an AJAX call and tested the JS file by alerting out the POST values being sent along with the data string. Everything seems fine at that point. I then passed these values to the PHP file where they are required, making sure to keep it simple ...

phpjavascriptjquerymysqlajax

Alter the font color of text using JavaScript in an HTML document

I am struggling to change the title color in my HTML code below, but the text color does not seem to be changing. How can I make this adjustment? /** * Generate a HTML table with the provided data */ Highcharts.Chart.prototype.generateTable ...

javascripthtmlcolors

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

Which is the better option for data storage: JSON files or MySQL database?

I am currently developing a project that utilizes the vis.js JavaScript framework to showcase a visual network of various categories. There are approximately 2000 categories available for selection, each with a substantial amount of associated data. I am ...

javascriptmysqljson

Bizarre CSS Transitions and Scaling Quirks in Webkit

Working on a website, you can check it out here In Chrome, some strange behavior occurs when the window reaches a certain resolution. Specifically, at 943 pixels width, white bars appear next to images when hovering over them, giving the impression that t ...

google-chromecsstransition

Organizing subcategories within a dropdown checklist

I am currently working on a list that utilizes dropdownchecklist and I am looking to create subgroups from the elements in the list. The goal is that by clicking on a subgroup checkbox, it will automatically check all elements associated with it. Below is ...

javascriptphpjquerycheckbox

How can you assign values to a complex, multi-layered object?

My objective is to store distinct data in an object users: [ { 'names': [], 'addresses': [], } ], I am using checkboxes like this: <input type="checkbox" id="john" value="john" v-model="users.names"> Th ...

vue.jsvuejs2

Utilize a single submit button to navigate through multiple pages dynamically using JavaScript

I would like to navigate to different rooms with just one button using JavaScript. For instance, there are three rooms: "Kitchen, Toilet, and Bedroom". How can I utilize JS to enter any of these rooms based on my selection? If I input "kitchen" in the text ...

phpjavascripthtmlinputvalidating

What could be preventing the fill color of my SVG from changing when I hover over it?

I am currently utilizing VueJS to design an interactive map showcasing Japan. The SVG I am using is sourced from Wikipedia. My template structure is illustrated below (The crucial classes here are the prefecture and region classes): <div> <svg ...

javascripthtmlsvgvue.js

Guide on adding space between rows in a table using HTML and Bootstrap 5

In the current table containing my content, it appears like this: https://i.sstatic.net/Mm7qT.png. I wish to add space between each row to create distinct separation and achieve a look similar to this: https://i.sstatic.net/ARgR1.png I experimented with ...

htmlcssdatatablesbootstrap-5