Как передать элемент в @click?

Question

[Владимир Бандуристов]

Есть список

<li v-for="element in elements">
    <button @click="someFunctioin()">Click!</button>
</li>

Каким образом мне в someFunction() передать элемент, что бы я смог например повесить на него определенный класс или что либо вообще с ним делать?

Answer 1

[Koteezy]

Он по дефолту передается, просто примите аргумент в методе someFunction - это и будет текущий el ( el.target )

Answer 2

[0xD34F]

Объект события доступен как $event, так что

<button @click="someFunction($event.target)">Click!</button>

Но вообще, если вы действительно собираетесь

повесить на него определенный класс

, то так делать не надо. О том, как правильно работать с классами, вы можете прочитать в документации.

Comments

[Владимир Бандуристов]

Попробовал сделать как вы сказали и всё вроде бы круто, но вопрос: если у меня в <button> лежит например <i> (иконка из иконочного шрифта), то при клике если умудриться кликнуть по иконке, в функцию передается иконка. Как то можно ограничить что бы клик проходил по кнопке и в функцию передавалась только кнопка? На скриншоте ниже видно что класс добавился именно к иконке, а не к кнопке.

[0xD34F]

Владимир Бандуристов, вместо target используйте currentTarget.

[Владимир Бандуристов]

0xD34F, Спасибо огромное!

Answer 3

[Konstantin Malyarov]

Можно ещё и так @click="someFunctioin(element)"