1

Есть шаблон 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

1

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

// Отключим ненужные для примера
// сообщения в консоли.
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
0

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

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

В компоненте

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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