When using VueJS, clicking on one button will automatically disable all other remaining buttons

Currently, my setup involves three buttons displayed using a v-for loop, each with its own click method.

I'm trying to implement a feature where clicking on one button disables the others, but also allows clicking on the active button to re-enable all of them again.

Any advice or suggestions on how I can achieve this would be greatly appreciated!

'data': []

<div v-for="(index, value, key) in data.data">
    <button @click="onClick(index)">
        <div>{{ index.id }}</div>
    </button>
</div>

onClick(index) {//}

Answer №1

Is this the kind of code you are looking for?

let vueApp = new Vue({
  el: "#app",
  data: {
    buttons: [false, false, false]
  },
  methods: {
    handleButtonClick(index) {
      if (this.buttons.every(button => !button)) {
        this.buttons = this.buttons.map((button, i) => (i === index ? true : false));
      } else {
        this.buttons = this.buttons.map(() => false);
      }
    }
  }
});

Check out this example on CodePen

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

Angular JS Sorting Wordpress Plugin allows users to easily organize and sort content

Seeking some assistance here, any help would be greatly appreciated. Currently using a Wordpress Angular JS plugin that is causing some unusual alphabetical sorting. This snippet of code showcases the taxonomy: <!-- for taxonomy --> <div ng-if ...

Adding a new key and value to my JSON dataset

I received the JSON response below: { "PatientSearchResult": { "Patient": [{ "AccountBalanceCalcMethod": 2, "AlternatePatientID": 0, "AssignmentOfBenifits": 0, "CellPhoneNumber1": null, ...

Unexpected token N error was thrown while using the Jquery .ajax() function

While working on a form submission feature using JQuery .ajax() to save data into a MySQL database, I encountered an error message that says "SyntaxError: Unexpected token N". Can someone please explain what this means and provide guidance on how to fix it ...

The code snippet $(this).nextAll("#...").eq(0).text("***") isn't functioning as expected

I am experiencing an issue with the following line of code: $(this).nextAll("#status").eq(0).text("Deleted"). I am trying to insert the text "Deleted" in a <span> tag, but it does not seem to be working... Here is my code: admin.php PHP: $sql = "SE ...

Retrieve the value from the URL by parsing it using JSON

My goal is to extract the asciiName from a specific URL: http://services.gisgraphy.com/geoloc/search?lat=21.283300399780273&lng=72.9832992553711&radius=10000<br> I am utilizing ajax jsonp for this task. Below is the complete code snippet ...

Guide on using jQuery to dynamically update a section of an ejs template following an AJAX request in ExpressJS

I'm currently struggling to figure out how to dynamically update a portion of the DOM using EJS after a jQuery ajax call. The issue arises with a live search feature that successfully sends a request to the server, searches the database, and returns a ...

Ways to display all current users on a single page within an application

I have come across a project requirement where I need to display the number of active users on each page. I am considering various approaches but unsure of the best practice in these scenarios. Here are a few options I am considering: 1. Using SignalR 2. ...

The paragraph was unable to start in a new line as expected

After spending the past couple of hours scouring the internet and trying various solutions, I have come up empty-handed. My dilemma revolves around attempting to create a line break within a paragraph, but no matter what I try, it doesn't seem to work ...

Passing extra data along with dynamic routes in Reactjs

I'm currently working with Reactjs and Next.js, and I've got my [slug.js] functioning properly with the following URL: <Link href={`/${post.slug}`}><a> However, I need to pass a "hidden" additional parameter along with it. Whenever I ...

Issue with Bootstrap 4.6 Collapse Feature Failing to Toggle (Opening or Closing)

Take a look at the code snippet below. I'm facing an issue with my Bootstrap 4.6 collapse feature not opening when I click the button. Interestingly, running $("#30-50hp").collapse('show') in the JavaScript console does make it op ...

Setting up a simple configuration for WebGl and Javascript

I am currently using OSX 10.9.5 (Mavericks) and following a WebGL tutorial script provided on . I copied and pasted the code from the tutorial into TextEdit and saved it as HTML with the following file structure: webgl | +--index.html | ...

The phonegap page redirection is failing, as the 'location' property of the object does not function correctly

I'm attempting to implement a straightforward page redirection in PhoneGap using JavaScript. Within an iframe, I have the following code: window.parent.location("event_select.html"); Unfortunately, this approach is unsuccessful and results in the fo ...

The validation function for email addresses in Express-validator seems to be malfunctioning

I've encountered an issue with the validation process in my code. Everything seems to be working fine except for the .isEmail method, which keeps flagging even valid email addresses as invalid. No matter how I adjust the validation rules, the problem ...

Eliminate any leading or trailing spaces around a string contained within a tag within a contenteditable div

I am working on a project to eliminate extra spaces before and after text within a bold tag. Functionalities: I developed a text editor where users can type text, select it, and apply bold formatting. Additionally, there is an HTML button that displays th ...

When attempting to access AJAX JSON properties using an index within a promise, the result returned is undefined

I have a quiz app that communicates with my server's API using MongoDB. I am trying to access the response indexes in this way: setTimeout(() => { axios.get('/api/ninjas') .then(function (questions) { var data = questions.d ...

The retrieval of JSON file using $.GetJson() is unsuccessful from local directory

There is a basic autocomplete program in place. The data entered in the textbox is successfully captured while debugging, however, the GetJson() function fails to retrieve the JSON file, causing the program to malfunction. Here's the relevant code sn ...

I'm looking to design a footer similar to the one on Jamendo's website using either CSS or JS. Can you provide

The footer design on this website has me puzzled. I want to replicate a similar footer on my own site, but it seems quite challenging. ...

How can I pass function arguments dynamically to a nested function in Node.js?

Currently using Node 6.11.0, I am attempting to accomplish the following dynamically: const parentFunc = (arg1, arg2, arg3, arg4) => { childFunc('foo', arg1, arg2, arg3, arg4); }; I have attempted this method (without success): const pare ...

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

I am seeking a bookmarklet that, upon clicking, will access JSON data and retrieve the "temp" information to display in an alert indicating the weather with just one click. Is there a method to achieve this or do I need to utilize a different API? Here&ap ...

Refresh a div using jQuery and include PHP files for dynamic content updating

This is the code I am using to dynamically update divs containing PHP files: $(document).ready(function() { setInterval(function() { $('#ContentLeft').load('live_stats1.php').fadeIn("slow"); $('#ContentRight').load( ...