Как обработать событие (клик в карусели bootstrap) в vue.js?

Question

[semki096]

У меня есть слайдер бутстрап, листается при нажатии на превьюшки - миниатюры. У превьюшек есть атрибут 'alt'. Возможно ли Правильно обработать клик по данному превью во vue.js, чтобы получить данный атрибут? И как это сделать (если такой подход имеет право на существование)?
<img src="/img.png" v-bind:alt="color-red">

Comments

[Дмитрий Морозов]

Ну во 1, использовать @click (v-bind:click):

<img src="your.png" alt="2-your.png" @click="logAlt" />

<script>
....
methods: {
  logAlt(e) {
   console.log(e.target.attributes.alt.value)
  }
}
</script>

[semki096]

Спасибо. Подскажите, а это правильный путь, или лучше искать слайдер на vue (не нашел пока замены)? Смущает что клик обрабатываем в двух разных скриптах.

[Дмитрий Морозов]

semki096, Можете воспользоваться уже готовыми слайдерами (их достаточное кол-во на vue)

Answer 1

[Leonid Lupenko]

<img src="/img.png" v-bind:alt="color-red" @click="fn">

И в fn прилетит первый аргументом click-event. Достаточно просто event.target.getAttribute('alt').

Comments

[semki096]

Спасибо буду пробовать. Подскажите пожалуйста, а вообще это правильный путь? Получается что событие клика обрабатывается отдельно в vue и отдельно в скрипте слайдера. Можно ли как то сделать, чтобы этот слайдер работал ... как бы гарминично по коду? Или надо искать какие то слайдеры на vue (не нашёл альтернативы бутстраповскому)?

Answer 2

[Антон Антон]

https://bootstrap-vue.js.org/docs/components/carousel