[Vuejs]-VueJS: Pass data from template element to another

by

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

Leave a comment