Question

在我的应用中，我从数据数组中动态打印了一些卡片元素。我希望这些卡在单击时打开一个操作表，该操作表将显示来自同一数组元素的图像URL。

<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>

如您在这里看到的，我遍历npc数组以打印f7-card元素，并且在卡片上显示npc.npcImg图像的小预览。我想做的是在操作表中显示相同的图像。现在，我只是再次分别遍历数组，这当然会使所有图像按预期方式在同一元素内打印。

我不确定如何将两者链接在一起并将npc.npcImg传递到操作表组件。

非常感谢您的帮助。

Answer 1

我不了解framework7，但是在vue.js中，您必须使用此数组项作为显示图像的源。您可以将其作为参数传递给refs.actionsOneGroup.open()函数，并将其存储在变量中以供以后使用。在示例中，我将npc保存在selectedNpc变量中。您的代码将如下所示：

<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>

我创建了一个codepen，向您展示如何在vue.js中实现

VueJS：将数据从模板元素传递到另一个

1 个答案: