Discovering the clicked button in a Vue.js scenario containing 2 buttons

I am faced with a scenario where I have 2 buttons:

      <Button
              :disabled="disabled"
              :loading="isLoading1"
              @click="handleClick1"
              >Btn 1</Button>
          <Button
              :disabled="disabled"
              :loading="isLoading2"
              @click="handleClick2"
              >Btn 2</Button>
    
    computed: {
    isLoading1(){
    ...
    }
    isLoading2(){
    ...
    }
    methods:{
    handleClick1(){
    ...
    }
    handleClick2(){
    ...
    }
    }

The challenge lies in ensuring that the loading state is only triggered for the button that was clicked, not both. How can this be accomplished? Is there a way to track which button was clicked or any other method to achieve this desired behavior?

Answer №1

Implement a single handler for handling two different event clicks with a parameter:

 <Button
              :disabled="disabled"
              :loading="isLoading1"
              @click="handleClick(1)"
              >Btn 1</Button>
          <Button
              :disabled="disabled"
              :loading="isLoading2"
              @click="handleClick(2)"
              >Btn 2</Button>
    

Within the methods, utilize the index provided to determine which button was clicked :

 handleClick(index){
    ...
    }

Answer №2

To make each button unique, assign an id to each one:

<Button
    id="button-3"
    :disabled="disabled"
    :loading="isLoading3"
    @click="handleClick"
>
    Btn 3
</Button>

<Button
    id="button-4"
    :disabled="disabled"
    :loading="isLoading4"
    @click="handleClick"
>
    Btn 4
</Button>

Next, pass the click event to a handler function and extract the id of the clicked button:

methods: {
    handleClick(e) {
        console.log(e.target.id)
        // Perform different actions based on the id:
        if (e.target.id === 'button-3') {
            this.doSomething()
        } else if (e.target.id === 'button-4') {
            this.doAnotherThing()
        }
    }
}

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

How to fetch a single document from a nested array using Mongoose

Currently, I am working on a MongoDB database using Mongoose in Node.js. The collection structure resembles the following: { cinema: 'xxx', account: 'yyy', media: { data: [{ id: 1, name: 'zzz& ...

Tips for correctly storing an async/await axios response in a variable

I am facing a challenge with the third-party API as it can only handle one query string at a time. To overcome this limitation, I am attempting to split multiple strings into an array, iterate through them, and make async/await axios calls to push each res ...

Sending information to a dialog box

I'm facing a challenge with my button that triggers a modal. Although the button works fine, I now need to figure out how to pass data from the button to a specific field within the modal. Here is the HTML code: <input type=button value='Add ...

Chronological Overview (Highcharts)

Can you customize a timeline in Highcharts to resemble the image? https://i.sstatic.net/5Lipu.png I have a functional example of the timeline I desire, but the color coding and filtering aspects are challenging for me. I am attempting to apply a filter th ...

React state update not triggering a component re-render

I've been attempting to toggle the visibility of a div by clicking on another div, but I'm encountering an issue. The div becomes invisible on the first click only if it was visible initially. After that, it remains invisible and does not update. ...

React component is being invoked prior to the completion of the fetch operation

In my React code, I am facing an issue with the fetch function not completing in time to pass data to the Chart component. As a result, the chart is rendered without any graph displayed. export const OverviewChart = () => { type dateValue = { x: n ...

Typescript error: The property 'set' is not found on type '{}'

Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...

Tips for integrating Apache Solr with Cassandra without using DataStax Enterprise (DSE)

Embarking on a new project, I find myself utilizing Cassandra as the chosen DBMS, with Apache Solr serving as the search engine and Node.js powering the server scripting language. While I am well-versed in Node.js, Cassandra and Solr are unfamiliar territ ...

What steps should be taken to prepare files (such as editing images) before they are uploaded to Google Drive using the `rpldy/drive-uploady` tool?

I have successfully implemented rpldy/drive-uploady to upload files to Google Drive. However, I would like to allow users to edit images before uploading them. How can I achieve this? Below is the code snippet: import DriveUploady from "drive-uploady ...

Unexpected behavior with Javascript selectedIndex

The code I have should display the 'yestext' div when 'Yes' is selected in a dropdown box. However, this functionality is not working as expected. The issue seems to be with the JavaScript function, but it's unclear what exactly is ...

Retrieving data from controllers and passing it to directives in Angular applications

I have integrated a directive into my Angular website to generate a customized page header. Within this header, I aim to display the user's first and last name. My application is enclosed within a MainController. Below is the rendered HTML: <html ...

Find the difference between array_A and the documents in array_B using MongoDB's $match operator, and return the result as Array_C

I need to create an array_C that includes only the elements from array_A that are not present in array_B. My approach involves using $match in aggregate to specify array_B. For instance: array_A = [1, 2, 3] array_B = [2, 4, 6, 8, 10] array_C = [1, 3] I a ...

Ways to activate an analysis when a component is re-rendered?

Is there a way to trigger an analytic when the search bar is used to search in the LibraryManager component and it gets re-rendered with the search value? The render function seems like the best option for adding the analytics trigger, but are there any ...

Creating a JavaScript class definition without the need for instantiation

I am looking to create an empty data class in JavaScript that can later be filled with JSON data. In C#, I would typically do something like this: class Person { string name; int age; Person[] children; var whatever; } However, when I try ...

What is the best way to integrate Vuejs while maintaining the integrity of the HTML5 structure

According to the official Vuejs documentation, when it comes to the mounting point: The designated element only acts as a mounting point. Unlike in Vue 1.x, the mounted element will always be replaced with DOM generated by Vue. Therefore, it is advised ...

The Google map is not showing up on the screen despite having entered the API Key

Trying to showcase a Google map on my website. Check out the code below:- <script> function initializeMap() { var coords = {lat: -25.363, lng: 131.044}; var mapObj = new google.maps.Map(document.getElementById('mapz') ...

Problem with detecting collisions in Three.js

Currently, I am developing a simple game where players can add objects (cubes) to the scene at the position of a raycaster (mouse) click on a large ground plane. To prevent cubes from overlapping with each other, I have implemented basic collision detectio ...

Tips on ensuring CSS is properly loaded on a Django HTML page

Despite numerous attempts, I cannot get my CSS to render properly on any of the HTML pages within a Django project. I've tried various solutions from Stack Overflow, such as adding the following code snippet: <link rel="stylesheet" href=& ...

Encountering error ORA-12514 when utilizing the node oracle-db npm package

At the moment, I am immersed in a project that relies on utilizing oracle for its backend. Following the instructions provided in this link, I successfully installed node-oracledb on my Mac using npm. The contents of my file are as follows: var oracledb = ...

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...