CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
user12009061
user12009061

Reputation:

How to find which button was clicked among 2 buttons in Vue.js?

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 point is that both buttons have almost the same conditions for showing it loading. I need somehow to find which button was clicked for being able to show the loading case only for that button. How can I find which button was clicked? In other words, it should be loading only for the clicked button, not both buttons. How can be this achieved either by somehow tracking the clicked button or by another way?

Upvotes: 1

Views: 1409

Answers (2)

Maylor
Maylor

Reputation: 598

What you can do is give each button an id:

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

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

And then pass your click event into the click handler function and retrieve the id of the button that was clicked:

methods: {
    handleClick(e) {
        console.log(e.target.id)
        // If you want to to do something depending on the id:
        if (e.target.id === 'button-1') {
            this.doSomeMethod()
        } else if (e.target.id === 'button-2') {
            this.doSomeOtherMethod()
        }
    }
}

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Add one handler for the two 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>

in methods use that index to know the clicked button :

 handleClick(index){
    ...
    }

Upvotes: 1

Related Questions