Struggling to detect a click event within a VueJS application when using a bootstrap button-group

I am currently working on a VueJS project that includes a bootstrap button group...

<div class="btn-group btn-group-xs pull-right" data-toggle="buttons">
  <label class="btn btn-primary label-primary">
<input type="radio" name="options" id="option1" autocomplete="off" v-on:click="clearEntries"> A
  </label>
  <label class="btn btn-primary label-primary">
<input type="radio" name="options" id="option2" autocomplete="off" v-on:click="clearEntries"> B
  </label>
  <label class="btn btn-primary active label-primary">
<input type="radio" name="options" id="option3" autocomplete="off" checked v-on:click="clearEntries"> C
  </label>
   <label class="btn btn-primary label-primary">
<input type="radio" name="options" id="option4" autocomplete="off" v-on:click="clearEntries"> D
  </label>
</div>

I am looking for a way to trigger a method when a radio button is selected. However, the click event does not seem to be activating. Could it be caused by the styles from Bootstrap interfering?

Do you have any suggestions?

javascripttwitter-bootstrapvue.js

Answer №1

Make sure to place the v-on:click="clearEntries" on the label element and not the input.

new Vue({
  el: "#app",
  methods: {
    clearEntries: function() {
      alert('clearEntries !');
    }
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="app">
<div class="btn-group btn-group-xs pull-right" data-toggle="buttons">
  <label v-on:click="clearEntries" class="btn btn-primary label-primary">
<input type="radio" name="options" id="option1" autocomplete="off"> A
  </label>
  <label v-on:click="clearEntries" class="btn btn-primary label-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> B
  </label>
  <label v-on:click="clearEntries" class="btn btn-primary active label-primary">
<input type="radio" name="options" id="option3" autocomplete="off" checked> C
  </label>
   <label v-on:click="clearEntries" class="btn btn-primary label-primary">
<input type="radio" name="options" id="option4" autocomplete="off"> D
  </label>
</div>
</div>

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

Tips for adding color to the <td> element in an ejs file using nodeJS

I am looking to incorporate a color into my .ejs file. Here is the code snippet I am working with: <% resultList.forEach(function(item, index){ %> <tr> <td><%= item.function %></td> <td><%= item.value %>< ...

javascripthtmlcssnode.jsejs

Why does ng-bind fail to display values from rootScope that have been set by using ng-click?

I am trying to save a variable within $rootScope. When I have the following structure, everything works fine and the second div displays the value: <html ng-app> ... <body> <button ng-click="$rootScope.pr = !$rootScope.pr"></b ...

javascriptangularjsangularjs-scope

What are the steps to implementing PNG masking using PixiJS?

I am currently working on incorporating a png sprite as a mask for another layer. I found a demo on the pixi.js official website and created this fiddle: https://jsfiddle.net/raphadko/ukc1rwrc/ The code snippet below is what I am using for the masking fu ...

javascriptcsspixi.js

jQuery: Repeated Triggering of Button Click Event

At my website, I am facing an issue with multiple buttons being loaded twice via ajax from the same file. The problem arises when the event associated with a button fires twice if that same button is loaded twice. However, it functions correctly if only o ...

phpjavascriptjqueryajax

jQuery scrollTop(0) leading to unusual scrolling patterns

Every time I click on a button, a modal window appears with a fading effect: $('.display-all-comments').fadeIn(300); $('.display-all-comments').scrollTop(0); If I remove the scrollTop(0), the scrolling works as usual. To better illust ...

javascriptjquery

Adjust the sidebar size in Bootstrap 5 to align perfectly with the navbar brand

https://i.stack.imgur.com/Ra0c7.png I'm trying to ensure that the width of the sidebar on this page aligns consistently with the end of the logo in the top right. However, using variations of col-xxl-1 etc. is causing inconsistent sizes at different ...

javascripthtmlcssbootstrap-5

Sending blank data using ExpressJS ajax feature

I am encountering an issue while trying to send JSON data to my server as the POST requests are coming through with empty bodies. Below is the TypeScript code I am using on the front end: function sendData() : void { console.log("Sending data..."); var na ...

javascriptnode.jsexpress

Using Vue's v-for directive: Populate HTML dynamically with an event handler (@change) from an array within a component template

This is the setup I am currently using: HTML <question v-for="question in questions" v-bind:id="question.id" v-bind:title="question.title" v-bind:statement="question.statement" v-bind:interaction="question.interaction" @onchange-vg=" ...

arraysvue.jsevent-handlingonchangev-for

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually s ...

javascripthtmlcssscroll

What is the best way to notify administrator users when their accounts have exceeded the timeout period?

Working on the website for our high school newspaper, I've encountered a recurring issue on the admin page. Users are getting logged out after creating an article due to a time limit constraint. To address this problem, my goal is to implement an aler ...

javascriptphpsessionalertlogout

Using Javascript to extract and organize JSON arrays from various sets of checkboxes

Is there a way to automatically create an array of multiple groups of arrays like this: arr = {arr1:{index:value, index2:value2}, arr2:{index,value, index2:value2}}; The order is based on groups of checkboxes in HTML (see example below): <div class=& ...

javascripthtmlarraysjson

Creating adaptable HTML images by specifying width and height attributes within the image tag

My current website setup involves loading a full image and automatically adjusting its size to fit the screen by setting the image width to 100% in CSS. While this method works smoothly, it may not be following standards as I am not specifying width and he ...

javascripthtmlsizescreen-resolutionresponsive-images

In JavaScript, when a condition is met, two strings are produced but only the last string is printed

My for loop with nested arrays is working fine, but it should display two strings and only shows the last one. for (i = 0; i < $scope.taskGroups.length; i++) { for (j = 0; j < $scope.taskGroups[i].tasks.length; j++) { ...

javascriptangularjs

implementing a JavaScript function and declaring a variable from an HTML source

On my webpage, I have a feature that gathers a large amount of data using jQuery. My goal is to limit the number of results displayed by changing the shown results dynamically to create a false-page effect. This functionality is all handled through a singl ...

javascriptjqueryhtml

I am having trouble retrieving the array value from the response sent by my server

After receiving a dictionary from my server, when I try to access the values using the following code: {"filters":{ "Facture": [ "Магма (Тычок)", "Тонкий кирпич", "Гладк ...

javascriptjsonajaxjsp

Sending a 2-dimensional array from JavaScript to the server using AJAX

My JavaScript code involves working with a 2D array. var erg = new Array(); for (var i in val) { erg[i] = new Array(); for (var j in val[i]()) { erg[i][j] = val[i]()[j](); } } However, I encountered an issue where only the 1D array ...

javascriptajaxjqueryasp.net-ajax

Executing jQuery AJAX with PHP using 'POST' method to receive and process PHP code

Something seems to have gone wrong with my setup; it was functioning properly before but is now encountering issues. When trying to make a POST call from an HTML file to a php file (which fetches data from a REST API), instead of receiving the expected API ...

javascriptphpjqueryhtmlajax

The issue of the Ajax beforeSend function not triggering at times, causing a delay in displaying the bootstrap progress

I'm experiencing issues with my Bootstrap tabs and the progress bar not consistently showing up. I have 3 tabs, each displaying query results in a table. Whenever the search button is clicked or a tab is changed, an ajax call triggers a function with ...

javascriptjqueryajaxtwitter-bootstrap

code snippet for callback function in javascript

Recently, I've been working on a project with angularjs and phonegap and stumbled upon this interesting code snippet. While I have a basic understanding of what it does, the inner workings are still a bit unclear to me. Since I'm still getting fa ...

javascriptangularjscordova

Enforcing Single Menu Accessibility in React: Only One Menu Open at a Time

Just starting out with React and JavaScript, so please bear with me for any formatting issues or lack of knowledge on best practices. I'm using Tailwind UI for my website, which includes navigation menus that require JavaScript to open and close. I h ...

javascriptreactjs