I have multiple “PhotoBrowsers” in one page. One per group. When I add a new photo to the page then call photobrowser.open(idx) with the new idx, it opens the ‘last old’ idx. The old photos properly open via the same call, but the new ones all open the last old photo.
PhotoBrowser.Photos is properly updated and lists the photos (according to console.log()).
Here is a snippet of my template code
<f7-block v-for="grp in attachmentList" :key="grp.Title" class="group">
<!-- Title -->
<f7-block-title style="overflow:visible">{{grp.Title}}</f7-block-title>
<!-- Attachment Thumbnails -->
<div class="grid">
<f7-photo-browser
:photos="photosInGroupTitle(grp.Title)"
theme="dark"
:ref="'grp-'+grp.Title"
></f7-photo-browser>
<!-- One thumbnail/icon per attachment -->
<div v-for="(a,idx) in grp.IDs" :key="a" class="preview" >
<img
:src="calcURI(a)"
@click="openPhoto('grp-'+grp.Title,idx)"
/>
</div>
</div>
</f7-block>
Methods:
openPhoto(ref,idx){
console.log('[this.$refs[ref][0]].f7PhotoBrowser.photos',this.$refs[ref][0].f7PhotoBrowser.photos); // just make sure it is listed
console.log('[this.$refs[ref][0]] idx',idx); // checking the right IDX is sent.
this.$refs[ref][0].open(idx);
},
photosInGroupTitle(Title) {
if (!this.attachmentList[Title]) return [];
return this.attachmentList[Title].IDs.map(id => {
return {
url : this.calcURI(id)
}
});
},
And the attachmentList object looks like this:
attachmentList = {
'SITE xxxxxxx' : {
Title : SITE xxxxxxx,
IDs : [493939,522355,234553,223455]
},
}
As I said at the top, this works fine when the page loads and photoBrowsers are initialized at first. But then once I add a few photos, tapping on the new ones always opens the last ‘old’ photo (before the new ones were added).
attachmentList is properly updating, and even the photoBrowser.photos array contains the new urls. Is there a trick to get the photoBrowser.open(idx) to work after a reactive update?
Thanks!
