Confusion arises between Bootstrap button plugin and Vue checkbox click event

After incorporating bootstrap.min.js into my Vue app, I noticed that the checkboxes' @click event is no longer triggered. This issue specifically occurs when using bootstrap's button-group with data-toggle="buttons". If I remove bootstrap.min.js, the checkbox click event functions as expected. What might be causing this discrepancy?

Check out the Codepen link for reference:
https://codepen.io/ben_jammin/pen/gNPVvw?editors=1000

  <div class="btn-group btn-group-toggle shadow mb-3" data-toggle="buttons" role="group" aria-label="String Operations">
    <label class="btn btn-primary">
      <input @click="reverseString" type="radio" name="options" checked> Reverse
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Palindrone
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Uppercase
    </label>
    <label class="btn btn-primary">
      <input type="radio" name="options"> Reset
    </label>
  </div>



https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js


Bootstrap Button plugin
https://getbootstrap.com/docs/4.3/components/buttons/#button-plugin

javascripttwitter-bootstrapvue.jsdom-events

Answer №1

Combining Vue and JQuery can lead to conflicts down the road.

According to the Bootstrap website:

Many of our components rely on JavaScript for functionality, including jQuery, Popper.js, and our own plugins.

If you're looking for alternatives, consider using bootstrap-vue or exploring Element or Vuetify frameworks:

https://vuetifyjs.com/en/components/button-groups

If you ABSOLUTELY MUST, you can use a wrapper component, but it's best to avoid it if possible.

For more information on managing Vue with JQuery plugins, check out:

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

Record the actions emitted by child components

I am struggling to respond to an action emitted by a child component. The child triggers an event/action called init. I try to listen for this event in the parent component's events mapping. However, the callback function never executes, leading me to ...

vue.jsvuejs2vue-componentvue-flickity

Unable to execute redirect function in Next.js 14 application

I've been working on implementing basic authentication within a Next.js app, however I'm encountering issues with redirecting to the homepage from the auth.ts file. Below is a snippet of the code where I am implementing the loginForm: //loginForm ...

javascriptreactjsnext.js

Designing a dynamic presentation with varying intervals between slides

I am working on a jQuery slideshow that smoothly transitions between different <div> elements. In the current code, the slides change every 5 seconds. Is there a way to modify this so I can specify custom durations for displaying each slide? Here i ...

javascriptjqueryslideshow

"Unlocking the potential of JSON: A guide to retrieving and displaying three specific fields in

My PHP service is returning the following data: [[1,"16846"],[2,"16858"],[3,"16923"],[4,"16891"]] Within my HTML, I have ajax set up to fetch this information; $.ajax({ type: 'POST', url: 'getDadosGrafico.php', ...

javascriptphpjqueryjsonajax

When retrieving data from a PHP $_SESSION using an Ajax $_POST call, outdated information is being returned

I am encountering an issue that I cannot seem to figure out. Currently, my application consists of three pages: Home.php Nearmiss.php Reports.php Each of these pages includes code at the top with a specific "thispage" variable unique to that page. < ...

javascriptphpjqueryajaxsession

Is there a significant distinction between value and defaultValue in React JS?

React's homepage features the final illustration (A Component Using External Plugins) with a textarea: <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> While typing, the ...

javascriptreactjs

Implementing a delay using setTimeOut function to execute an action upon user input

Take a look at this code snippet: $("#test").on("keyup", (e) => { if(e.target.value.length === 3) { setTimeout(() => { console.log("fired") }, 2000) } }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

javascriptjqueryhtml

Using the moment library in Angular to convert date and time can sometimes lead to errors

Whenever I attempt to convert a Gregorian date to a Persian date, the minute value in the conversion ends up becoming an error. For instance, let's say I want to convert this specific date and time to a Persian date: 2020-09-14T16:51:00+04:30 should ...

javascriptangulartypescriptmomentjsjalali-calendar

Tips for moving an element to the end of an array

Patients' data is stored in the MongoDB database, and all patients are mapped through on the frontend to display a list. An additional boolean value indicates whether a patient is archived or not. If a patient is archived, it should be displayed at th ...

javascriptnode.jsreactjs

What are some ways to rejuvenate a computed property?

Is there a way to refresh the data displayed in someData after it has been updated and saved on the server? I have tried using $recomputed('someData'), but it's not working as expected. I believe I might need to utilize a Promise, but I&apo ...

apivue.jsvuexcomputed-properties

ajaxStart - Display change inconsistency

These are some helpful comments to shorten and improve the readability of the code In my current project, I am using Javascript (Ajax) along with PHP (Laravel). I encountered an issue where I have set up two listeners in my ajax function. One listener is ...

javascriptjqueryajax

Change not accepted

I am a beginner in Angular and still grappling with the fundamentals. On my menu, I have a cart icon with an initial value of 0 upon first load. In my product list, each product has an 'AddToCart' button. What I aim to achieve is- I want to dy ...

javascriptjqueryangularjs

Trouble with Component Lifecycle (ComponentDidMount) activation while switching tabs in TabBar?

After implementing the react-native-tab-navigator library to navigate between components, I encountered an issue where the componentDidMount lifecycle method works only once. I have reached out for help by posting a query on Github and have also attempted ...

javascriptreactjsreact-native

Extract the label from Chip component within the onClick() event in material-ui

-- Using Material-UI with React and Redux -- Within my material-ui table, there are <TableRow> elements each containing multiple <TableCell> components with <Chip> elements. These <Chip> components display text via their label prop ...

javascriptreactjsmaterial-ui

What is the best way to say hello using jQuery?

I need some assistance with a task that involves entering my name into an input field, clicking a button, and having an h1 tag display below the input saying Hello (my name)! Unfortunately, I am struggling to figure out how to achieve this. Below is the H ...

javascripthtmljquery

What is the Typescript definition of a module that acts as a function and includes namespaces?

I'm currently working on creating a *.d.ts file for the react-grid-layout library. The library's index.js file reveals that it exports a function - ReactGridLayout, which is a subclass of React.Component: // react-grid-layout/index.js module.exp ...

javascriptreactjstypescriptreact-grid-layout

How do I alter the color of a Vue 3 font awesome icon?

I am currently using Vue version 3.2.1 and have followed the official Font Awesome documentation for Vue 3 found at https://github.com/FortAwesome/vue-fontawesome. I also referenced a helpful video tutorial: https://www.youtube.com/watch?v=MoDIpTuRWfM Des ...

cssvue.jsfont-awesomevuejs3

Does writing JavaScript code that is easier to understand make it run slower?

While browsing the web, I stumbled upon this neat JavaScript program (found on Khan Academy) created by another user: /*vars*/ frameRate(0); var Sz=100; var particles=1000; scale(400/Sz); var points=[[floor(Sz/2),floor(Sz/2),false]]; for(var i=0;i<part ...

javascriptperformanceoop

Ways to eliminate brackets from a string

Currently, I am working on a challenge involving replacing strings using a function that accepts a string and an object of values. This task involves a two-part algorithm: Replacing values within the string that are enclosed in braces. If the value is wi ...

javascriptstringalgorithmreplace

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

javascripthtmljquerycssnode.js