Javascript 如何在Vue.js中的2个按钮中查找单击了哪个按钮?
我有两个按钮:Javascript 如何在Vue.js中的2个按钮中查找单击了哪个按钮?,javascript,vue.js,vuejs2,vue-component,Javascript,Vue.js,Vuejs2,Vue Component,我有两个按钮: <Button :disabled="disabled" :loading="isLoading1" @click="handleClick1" >Btn 1</Button> <Button :disabled=&quo
<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(){
...
}
}
Btn 1
Btn 2
计算:{
isLoading1(){
...
}
isLoading2(){
...
}
方法:{
handleClick1(){
...
}
handleClick2(){
...
}
}
关键是,两个按钮显示加载的条件几乎相同。我需要以某种方式找到哪个按钮被单击,以便能够仅显示该按钮的加载情况。我如何找到哪个按钮被单击?换句话说,应该仅为单击的按钮加载,而不是两个按钮。这是如何实现的通过某种方式跟踪单击的按钮或通过另一种方式?为两次事件单击添加一个处理程序,并使用一个参数:
<Button
:disabled="disabled"
:loading="isLoading1"
@click="handleClick(1)"
>Btn 1</Button>
<Button
:disabled="disabled"
:loading="isLoading2"
@click="handleClick(2)"
>Btn 2</Button>
您可以为每个按钮提供一个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>
他们用不同的异步操作做不同的事情,我想我可能无法将它们作为一个处理程序。它将如何让我只显示单击按钮的加载?使用条件,如
if(index==1){//执行btn 1的逻辑}否则if(index==2){///执行btn的逻辑}
如果有多个按钮,请使用switch/case谢谢,那么使用e.target.id怎么样?或者在vue中使用e.target.id是不好的做法?这是可以接受的,因为您没有使用idI来操作DOM,因此idI需要在加载方法中使用类似的内容
<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>
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()
}
}
}