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

Issues with resetting AngularJS form---"The AngularJS form

I have been putting in a lot of effort to make this work. Despite my knowledge about child scopes, prototypal inheritance, and the use of dot notation for the model, I am facing an issue with resetting the form. You can access the hosted form here. The rel ...

javascriptangularjsforms

Issue with MVC framework: AJAX query callback function not functioning properly

Struggling with implementing a basic Jquery Ajax callback: Here is my Jquery code snippet: $(document).ready(function () { $('#btnClient').click(function (e) { e.preventDefault(); var txtClient1 = $('#txtCli ...

javascriptc#jqueryajaxasp.net-mvc

Fade in images using jQuery

I am having issues with fading in and out images using jQuery, it doesn't seem to be working as expected. I think there might be something crucial that I am missing. Take a look at the script below: var count = 1; setInterval(function() { ...

javascriptjqueryhtmlcss

Adjust scale sizes of various layers using a script

I have created a script in Photoshop to adjust the scale size of multiple layers, but I am encountering some inaccuracies. The script is designed to resize both the width and height of the selected layers to 76.39%. However, when testing the script, I foun ...

javascriptjsxphotoshopphotoshop-script

Utilizing jQuery for interacting with iframes

My script functions perfectly on the page, but when I embed it using an iframe, the jQuery features stop working even though the script is written as usual. Even using $.noConflict(); does not resolve the issue. ...

javascriptjqueryiframe

The progress bar in Java Script is static and cannot be customized to change colors

Trying to use HTML for image uploads and I've created Java code to monitor the progress of the upload. However, I'm facing an issue where I cannot change the color of the progress loading bar. Below is the code I am currently using for uploading ...

javascriptphphtml

Breaking the link

My tabulator column contains text with line breaks that are displayed properly. However, when I use the built-in URL formatter, the line breaks disappear. {title:"Title", field:"title", formatter:"textarea"}, I attempted to add a link while maintaining t ...

javascriptnode.jsnpmtabulator

When using Firestore and Vue.js, encountering an issue where retrieving a value from a document using .get() method

I'm encountering an issue trying to store a returned item from a firebase document into a variable. When attempting the following, I receive the error message: Error getting sensor document: TypeError: Cannot set property 'node_addr' of unde ...

vue.jsgoogle-cloud-firestore

JavaScript: Targeting elements by their tag name within a designated container

When working with PHP, it is possible to use the getElementsByTagName method on any DOM object. However, this concept does not seem to exist in JavaScript. For example, if we have a specific node stored in the variable detailsNode, attempting to use detai ...

javascriptdom

implementing CORS on an Express server for a specific domain

I am attempting to send a cookie post-login via AJAX from my localhost to a server that is hosted elsewhere. In order to prevent any errors related to cookies, I have included the following code in my Axios setup: var instance = axios.create({ withCr ...

javascriptnode.jsexpresscookiesaxios

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

javascriptangularjs

Executing a JavaScript function using document.write()

When I try to click on the SWF part1 links within the document.write() function in order to call the openswf function, nothing happens. Here is my code: <html> <a href="#" onclick="Popup();">show popup</a> <script> functio ...

javascripthtml

Executing the command "node <app name>" does not result in any action

I am experiencing an issue with my bot app called "vgen.js". When I run the command "node vgen", the prompt/directory disappears and the cursor just blinks on the far left of the screen. I have been following instructions from a tutorial found here: https ...

javascriptnode.jsnpmbotframework

Is it possible to access the operating system's native emoji picker directly from a website?

While there are numerous javascript plugins and libraries available for allowing users to select emojis for text inputs, both Windows and Mac operating systems already have their own native emoji pickers accessible via ⊞ Win. or CTRL⌘Space. Is there a ...

javascripthtml

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

javascripthtmlcss

Guide to managing .glb model animations in A-FRAME using Three.js

Can someone assist me with playing a glb animation in A-FRAME using Three.js? The animation works for a second and then stops. Here is my current code: <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <scrip ...

javascriptanimationthree.jsaframegltf

remove MongoDB entry using unique identifier

I am currently working on a blog project using nodejs, express, and mongodb. My goal is to delete a specific document by its ID. For instance, if I want to remove a blog post with the ID 52976b1b0855c7e81a6192e9, I would make a request to localhost:3000/bl ...

javascriptnode.jsmongodb

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox. You can view my code on this codepen: <div class="wrapper"> <div class="calheader"> ...

javascripthtmlcss

Undefined value is returned for Vue 3 object property

Is there a way to extract additional attributes from the Keycloak object ? Currently, If I try, console.log(keycloak) it will display the entire keycloak object. Even after reloading, it remains in the console. However, when I do, console.log(keycloak.t ...

javascripttypescriptvue.jskeycloakvuejs3

Styling Form validation with Ant Design

Can a className prop be included in the Form.Item validation? <Form.Item name="username" rules={[ { required: true, message: '...' }, className="customValidation" //<- attempting to add a className but it is not fu ...

javascriptreactjstypescriptantd