add dynamic data-count attribute
This commit is contained in:
parent
e0f781106f
commit
1b15a47d71
1 changed files with 13 additions and 6 deletions
|
|
@ -1,16 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="auto-grid | counter" role="grid" multiselectable="true" style="--min: 15rem; --gap: 0.5rem">
|
<div
|
||||||
|
class="auto-grid | counter"
|
||||||
|
role="grid"
|
||||||
|
multiselectable="true"
|
||||||
|
style="--min: 15rem; --gap: 0.5rem"
|
||||||
|
>
|
||||||
<figure
|
<figure
|
||||||
v-for="image in tab.images"
|
v-for="image in tab.images"
|
||||||
class="image"
|
class="image"
|
||||||
role="gridcell"
|
role="gridcell"
|
||||||
:aria-selected="isSelected(image)"
|
:aria-selected="isSelected(image)"
|
||||||
>
|
:data-count="
|
||||||
<img
|
tab.selectedImages.includes(image)
|
||||||
:src="image.url"
|
? tab.selectedImages.indexOf(image) + 1
|
||||||
alt=""
|
: undefined
|
||||||
|
"
|
||||||
@click="ArrayUtils.toggle(tab.selectedImages, image)"
|
@click="ArrayUtils.toggle(tab.selectedImages, image)"
|
||||||
/>
|
>
|
||||||
|
<img :src="image.url" :alt="image.alt" />
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue