I'm studying how to create my own lightbox component in vue. I figured out how to do it, but I faced one issue. I don't know how to get an access to this index of the array.
<LightBox
:thumbnail="images[7]" :images="images"></LightBox>
<template>
<div>
<a href="" @click.prevent="show">
<img class="thumbnail" :src="thumbnail">
</a>
<div class="lightbox" v-if="visible" @click="hide">
<div class="flex">
<div class="cursor left" @click.stop="prev" :class="{ 'invisible': !hasPrev() }">
<svg fill="#ffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 537.66 537.66" xml:space="preserve" stroke="#ffff">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<g>
<g>
<path
d="M526.375,175.442H249.458l101.781-115.23c2.939-5.875-0.006-10.64-6.574-10.64H194.735 c-15.012,0.003-34.74,30.233-44.538,41.188C132.96,110.028,3.146,254.326,2.204,256.208c-2.938,5.875-2.938,15.404,0,21.279 L177.52,477.449c2.938,5.875,10.646,10.64,17.215,10.64h149.931c6.57,0,9.514-4.765,6.576-10.64l-98.746-114.347h273.879 c6.234,0,11.285-5.052,11.285-11.285v-165.09C537.66,180.494,532.609,175.442,526.375,175.442z" />
</g>
</g>
</g>
</svg>
</div>
<div class="lightbox-image" @click.stop="">
<img :src="images[index]">
</div>
<div class="cursor right" @click.stop="next" :class="{ 'invisible': !hasNext() }">
<svg fill="#ffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
viewBox="0 0 537.66 537.66" xml:space="preserve" transform="rotate(180)" stroke="#ffff">
<g id="SVGRepo_bgCarrier" stroke-width="0" />
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" />
<g id="SVGRepo_iconCarrier">
<g>
<g>
<path
d="M526.375,175.442H249.458l101.781-115.23c2.939-5.875-0.006-10.64-6.574-10.64H194.735 c-15.012,0.003-34.74,30.233-44.538,41.188C132.96,110.028,3.146,254.326,2.204,256.208c-2.938,5.875-2.938,15.404,0,21.279 L177.52,477.449c2.938,5.875,10.646,10.64,17.215,10.64h149.931c6.57,0,9.514-4.765,6.576-10.64l-98.746-114.347h273.879 c6.234,0,11.285-5.052,11.285-11.285v-165.09C537.66,180.494,532.609,175.442,526.375,175.442z" />
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
thumbnail: {
type: String,
required: true,
},
images: {
type: Array,
default: () => [],
},
},
data() {
return {
visible: false,
index: 0,
};
},
methods: {
show() {
this.visible = true;
this.index = this.thumbnail.length
},
hide() {
this.visible = false;
this.index = 0;
},
hasNext() {
return this.index + 1 < this.images.length;
},
hasPrev() {
return this.index - 1 >= 0
},
prev() {
if (this.hasPrev()) {
this.index -= 1;
}
},
next() {
if (this.hasNext()) {
this.index += 1
}
}
}
}
</script>
I don't understand how to do it since I haven't found any method that can extract it from this string. I had tried to use IndexOf(), lastIndexOf(), map(), slice() but none of these methods hadn't worked for me
If you want to find index of it use:
let thumbIndex = images.findIndex(element => element === thumbnail);
Or instead of using string for thumbnail, try using just index of it, since you already passed this with images array, so there is no need to pass it again. It would look like this:
<LightBox :thumbnailindex="7" :images="images"></LightBox>
Then you will be able to access it directly from the array:
<img class="thumbnail" :src="images[thumbnailindex]">
Of course will need slight refactor of props, methods and template :)