Photo Browser stays empty while array/objects is filled

Questions
1

Problems with the default Photo Browser in combination with Vue.

This is my code:

<f7-photo-browser ref="pb" :photos="photos" @open="onOpen" ></f7-photo-browser>
<img :src="form.photo_1" @click="openPhotoBrowser" />

This is the function calling to open the Browser.

openPhotoBrowser: function () {
    var self = this;
    self.setPhotos();
    setTimeout(function(){
        self.$refs.pb.open();
    }, 500); // delay for giving the time to fill it all, thought this was the bug but isn't 
},

This is the function where I add all images:

setPhotos() {
    self = this;
    self.photos = [];
    var json = [];
    if(self.form.photo_1) {
        json.push({url: self.form.photo_1, caption: '#1'});
    }
    if(self.form.photo_2) {
        json.push({url: self.form.photo_2, caption: '#2'});
    }
    self.photos = json;
    console.info(self.photos);
},

So when changing an image, it’ll regenerate the Photos array.
It will open the Photo Browser but with on top: 1 of 0.

2

try: self.$refs.pb[0].open();

3

Nope, “undefined is not an object (evaluating ‘self.$refs.pb[0].open’)”

4

how about this:
setTimeout(function(){
const pb = window.f7.photoBrowser({
photos: self.photos,
type: ‘standalone’
})
pb.open()
}

1 Like