Vue + F7 -> PhotoBrowser not reactive?

I have multiple “PhotoBrowsers” in one page. One per group. When I add a new photo to the page then call 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">
    <!-- One thumbnail/icon per attachment -->
    <div v-for="(a,idx) in grp.IDs" :key="a" class="preview" >




   console.log('[this.$refs[ref][0]]',this.$refs[ref][0]; // just make sure it is listed
   console.log('[this.$refs[ref][0]] idx',idx); // checking the right IDX is sent.

 photosInGroupTitle(Title) {
  if (!this.attachmentList[Title]) return [];

  return this.attachmentList[Title] => {
    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 array contains the new urls. Is there a trick to get the to work after a reactive update?


Hi, can you make a small jsfiddle?

That’d be a good idea, but I’ve decided to do either my own f7-swiper (instead of using photo browser), or to just open the link in a “new tab” so the engine can handle any kind of file thrown at it.

My idea of using f7-browser was good, but lacked the foresight that there would be multiple types of files (text, pdf, img, video…etc)

Thanks for the offer to help though, and I’ll be back if the f7-swiper dosen’t work out. :slight_smile:

1 Like