Photo browser in vue not display the image

Questions
1

image
image.png1256×765 11.6 KB

im using photo browser in vue, i call api call using axios and succeed to bind items in element except the photo browser. i tried many times with different code and realize inside photo browser my items is undefined, but in picture above in chrome console it showed the log but in app doesn’t display anything. please help!

<f7-photo-browser
                :photos="[photo]"
                ref="standalone"
              ></f7-photo-browser>

async created() {
    let decode = this.$jwt.decode(localStorage.getItem('token'));
    this.decoded = decode.userId;
    this.$f7.preloader.show();
    let result = await axios().get('/lapor/' + this.id);
    this.$f7.preloader.hide();
    console.log(result.data.values);
    
    this.marker = L.latLng(result.data.values[0].lat_lapor, result.data.values[0].long_lapor);
    this.center = L.latLng(result.data.values[0].lat_lapor, result.data.values[0].long_lapor);
    this.items = result.data.values[0];

    let url = this.baseURL + result.data.values[0].foto_lapor;
    console.log('ref', this.$refs.fotolapor.src);
    this.photo = url;
    console.log('pb', this.photo);

  }
2

Do it in mounted hook instead, and add this line after:

...
this.photo = url;
this.$refs.standalone.f7PhotoBrowser.photos = [url]

Or just add v-if="photo" to <f7-photo-browser component

1 Like
3

thank you sir, i just added v-if="photo" but i still tried it in created hook and its works like charm :smile: