Как передавать data-id кнопок в vue.js компонент при клике?

Пользователь

от lilla.herman , в категории: JavaScript , год назад

Как передавать data-id кнопок в vue.js компонент при клике?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от forest , год назад

@lilla.herman 

Пользователь

от william_stoltenberg , 2 месяца назад

@lilla.herman 

Для передачи data-id кнопки в Vue.js компоненте при клике можно воспользоваться следующим подходом:

  1. В шаблоне компонента определите кнопку с помощью директивы v-for и привяжите к ней обработчик клика, передавая data-id кнопки в метод:
1
2
3
4
5
<template>
  <div>
    <button v-for="button in buttons" :key="button.id" @click="handleButtonClick(button.id)">{{ button.title }}</button>
  </div>
</template>


  1. В скрипте компонента определите массив кнопок и метод handleButtonClick:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<script>
export default {
  data() {
    return {
      buttons: [
        { id: 1, title: 'Кнопка 1' },
        { id: 2, title: 'Кнопка 2' },
        { id: 3, title: 'Кнопка 3' }
      ]
    };
  },
  methods: {
    handleButtonClick(id) {
      console.log('Нажата кнопка с id:', id);
      // Выполните нужные действия с использованием id
    }
  }
};
</script>


Когда пользователь нажимает на кнопку, вызывается метод handleButtonClick и ему передается соответствующий data-id кнопки. Вы можете использовать этот id для выполнения необходимых действий или изменения состояния компонента.