Photo Browser stays empty while array/objects is filled

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;
    }, 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; = [];
    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'});
    } = json;;

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

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

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

how about this:
const pb = window.f7.photoBrowser({
type: ‘standalone’

1 Like