Элементы Vuetify-списка
v-list-tile содержат кнопки действий.
Когда сделал элемент ссылкой Vue-Router черех свойство
to, клики по кнопкам стали тоже перекидывать на ссылку роутера. Несмотря на модификатор stop:
@click.stop="..."Примерный template<template>
<v-list-tile :to="'/details/' + id">
<v-list-tile-content>
<v-list-tile-title>{{ title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon @click.stop="saveas">
<v-icon color="grey lighten-1">save_alt</v-icon>
</v-btn>
</v-list-tile-action>
<v-list-tile-action>
<v-btn icon @click.stop="refresh">
<v-icon color="grey lighten-1">refresh</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</template>
Как предотвратить срабатывание router-link при клике на v-btn внутри?
Upd. Кажется, дело в том, что при наличии атрибута
to, компонент рендерится внутри тега anchor
<a>, что заставляет срабатывать клики на любых элементах внутри него как переход по ссылке.
Что с этим можно сделать?
Простой