Ссылка на маршрутизатор Vue 3 внутри интерактивной строки таблицы

Простой вопрос. У меня есть ссылка на маршрутизатор внутри интерактивной строки таблицы. когда я нажимаю на ссылку маршрутизатора, это вызывает @clickсобытие вместо запуска файла router-link.

Как я могу это исправить?

<tr v-for="(blabla, index) in data" @click="goToIssue(blabla.id)">
 <td>{{ blabla.id }}</td>
 <td>{{ blabla.username }}</td>
 <td>{{ blabla.name }}</td>
 <td>
 <router-link 
:to="'/project' + blabla.project.id"
 >
 Details
 </router-link>  
 </td>  
</tr>

Решение проблемы

Чтобы предотвратить clickпередачу -event родительскому элементу, используйте пользовательский модификатор <router-link>, который использует stopмодификатор события для базовой ссылки @click:

Примените customопору на <router-link>.

В <router-link>слот по умолчанию добавьте объект <a>с его hrefпривязкой к hrefреквизиту слота.

Также добавьте clickобработчик -event, который вызывает реквизит слота navigate(функция, которая переходит к <router-link>реквизиту to). Также примените .stopмодификатор события к clickпрослушивателю -event, чтобы остановить распространение события на родительские элементы.

<router-link:to="'/project/' + blabla.project.id"
 custom 1️⃣
 v-slot="{ navigate, href }">
 <a:href="href" 2️⃣
 @click.stop="navigate" 3️⃣
 >
 Details
 </a>
</router-link>

демо