fix: make list row link to its child component using router-link

This commit is contained in:
Shariq Ansari 2023-07-27 11:31:56 +05:30
parent 0fe3bff2fa
commit 1d768acf09

View File

@ -60,9 +60,10 @@
</div> </div>
</div> </div>
<div id="list-rows" class="h-full overflow-y-auto"> <div id="list-rows" class="h-full overflow-y-auto">
<div <router-link
v-for="row in rows" v-for="row in rows"
:key="row[rowKey]" :key="row[rowKey]"
:to="$router.currentRoute.value.path + '/' + row[rowKey]"
class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-200 ease-in-out" class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-200 ease-in-out"
:class=" :class="
selections.has(row[rowKey]) selections.has(row[rowKey])
@ -72,7 +73,7 @@
> >
<Checkbox <Checkbox
:modelValue="selections.has(row[rowKey])" :modelValue="selections.has(row[rowKey])"
@click="toggleRow(row[rowKey])" @click.stop="toggleRow(row[rowKey])"
class="[&>input]:duration-300 [&>input]:cursor-pointer" class="[&>input]:duration-300 [&>input]:cursor-pointer"
/> />
<div <div
@ -107,7 +108,7 @@
{{ getValue(row[column.key]).label }} {{ getValue(row[column.key]).label }}
</div> </div>
</div> </div>
</div> </router-link>
</div> </div>
<transition <transition
enter-active-class="duration-300 ease-out" enter-active-class="duration-300 ease-out"