Vue: Media-Item :media issue


#1

Ahoi Forum.

I am having issues with the media-list. My code looks like this:

<f7-list media-list>
  <f7-list-item
    v-for="item in items"
    :key="item.itemId"
    media-item
    :media="item.iconPath"
    swipeout:title="item.name" :subtitle="item.title">
    <f7-swipeout-actions right>
      <f7-swipeout-button @click="accept(item.itemId)">Accept</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
</f7-list>

More specifically it is this line:

:media="item.iconPath"

The iconPath, as it suggests, is the URI for the icon on the server.
For example: /static/img/items/item.png
PNG Icon: 300 x 300 Pixel, 16 kByte

Problem Description

Every item has its own icon and should display it. After a while all items show the same icon. It is not always the same icon.

Context Information

Framework7 version: 3.0.1
Vue.js version: 2.5.16
Platform and Target: iOS 11.4.1, iPhone SE

Thank you for your help.

Regards
Toby


#2

Hey! Can you please provide a bit more info on how it can be replicated so i can see the issue?


#3

Hey :slight_smile:

Thank you for answering so quickly. We wanted to test some more, before I reply to you. For the moment the issue is solved. We believe it was caused by scss and not the f7 framework.

Sorry for taking your time and thanks again.

Regards
Toby