Как остановить событие клика из под-компонента, которое прорывается, несмотря на .stop?

Элементы 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>, что заставляет срабатывать клики на любых элементах внутри него как переход по ссылке.

Что с этим можно сделать?
  • Вопрос задан
  • 393 просмотра
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
Поможет .prevent
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Ну тут 2 варианта:
1) У v-list-tile менять с to на @click и там уже отслеживать
2) У v-list-tile есть пропса tag, туда div отправить, по умолчанию берёт с router-link, а там a
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы