0

In my app I've got some card elements printed dynamically from an array of data. I wanted these cards to open an action sheet on click, that would display an image url from the same array element.

<f7-button class="img-trigger" @click="$refs.actionsOneGroup.open()">
  <f7-card v-for="npc in npcs" :key="npc.npcId" class="boss-card-container">
    <f7-card-header class="no-border boss-card subheading no-hairline" valign="bottom" :style="'background-image:url(' + npc.npcImg + ');'">
       {{ npc.npcName }}
    </f7-card-header>
  </f7-card>
</f7-button>

<f7-actions class="img-container" ref="actionsOneGroup">
  <f7-actions-group v-for="npc in npcs" :key="npc.npcId">
   <img :src="npc.npcImg" class="boss-image">
 </f7-actions-group>
</f7-actions>

As you can see here, I iterate through the npc array to print the f7-card elements, and on the cards I show a small preview of the npc.npcImg image. What I would like to do is show that same image inside the action sheet. For now I just iterate through the array again separately, which of course results in all the images printing inside the same element, as expected.

I'm not sure how to link the two together and pass the npc.npcImg down to the action sheet component.

Help is much appreciated.

1 Answer 1

0

I don't know about the framework7, but in vue.js you have to use this array item as source to display the image. You can pass it as parameter on the refs.actionsOneGroup.open() function and store it in a variable to use it after. In the example I saved the npc in the selectedNpc variable. Your code will looks like it:

<f7-button class="img-trigger">
  <f7-card v-for="npc in npcs" :key="npc.npcId" class="boss-card-container" @click="$refs.actionsOneGroup.open(npc)">
    <f7-card-header class="no-border boss-card subheading no-hairline" valign="bottom" :style="'background-image:url(' + npc.npcImg + ');'">
       {{ npc.npcName }}
    </f7-card-header>
  </f7-card>
</f7-button>

<f7-actions class="img-container" ref="actionsOneGroup">
  <f7-actions-group v-if="selectedNpc">
   <img :src="selectedNpc.npcImg" class="boss-image">
 </f7-actions-group>
</f7-actions>

I created a codepen to show you how to do it in vue.js

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.