0

Есть шаблон blade, в котором выводятся кнопки. Кнопки выводят модальное окно на экран.

<button data-id="1">Button #1</button>
<button data-id="2">Button #2</button>

Есть vue-компонент, в котором находится содержимое модального окна

<example-component></example-component>

Как получить data-id в моем vue-компоненте при клике на кнопку?

1
  • 1
    Вы серьёзно полагаете, что ваши мысли легко читаются? Ну тогда вам надо повесить слушателя внутри компонента, либо же передавать туда данные через пропсы.
    – user273805
    2 окт 2018 в 2:11

2 ответа 2

0

Можно передавать данные прям в событие В шаблоне

<button @click="click(1)">Button #1</button>
<button @click="click(2)">Button #2</button>

В компоненте

methods: {
  click(id){
    console.log(id)
  }
}
0

Один из вариантов:

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

new Vue({
  el: "#app",
  methods: {
    handleButton(event) {
      const $button = event.target;
      const buttonID = $button.dataset.id;
      console.log(buttonID);
    }
  }
})
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
<div id="app">
  <button data-id="1" @click="handleButton">Button #1</button>
  <button data-id="2" @click="handleButton">Button #2</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

1
  • @РустамГимранов спасибо.
    – detriat
    19 июн 2019 в 8:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.