Как найти, какая кнопка была нажата среди 2 кнопок в Vue.js ?

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

У меня есть 2 кнопки:

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

Дело в том, что обе кнопки имеют почти одинаковые условия для отображения ее загрузки. Мне нужно как-то найти, какая кнопка была нажата, чтобы иметь возможность отображать вариант загрузки только для этой кнопки. Как я могу найти, какая кнопка была нажата? Другими словами, она должна загружаться только для нажатой кнопки, а не для обеих кнопок. Как это может быть достигнуто либо каким-то образом отслеживанием нажатой кнопки, либо другим способом?

Ответ №1:

Добавьте один обработчик для двух щелчков события с параметром:

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

в методах используйте этот индекс, чтобы узнать нажатую кнопку :

  handleClick(index){
    ...
    }

1. Они делают разные вещи с разными асинхронными операциями, я думаю, что, возможно, я не смогу сделать их одним обработчиком.

2. И как это позволит мне показывать загрузку только для этой нажатой кнопки?

3. используйте условие, подобное if(index===1){//do the logic of btn 1}else if(index===2){////do the logic of btn } если есть несколько кнопок, используйте переключатель / регистр

4. Спасибо, как насчет использования e.target.id или это плохая практика в vue?

5. это приемлемо, поскольку вы не манипулируете DOM, используя этот идентификатор

Ответ №2:

Что вы можете сделать, это присвоить каждой кнопке идентификатор:

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