如何在 Vue.js 的 2 个按钮中找到哪个按钮被点击？

Question

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?

Answer 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){
    ...
    }

Answer 2

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()
        }
    }
}