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

Question

在我的应用程序中，我从一组数据中动态打印了一些卡片元素。我希望这些卡片在点击时打开一个动作 sheet，这将显示来自同一数组元素的图像 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 图像的小预览。我想做的是在动作 sheet 中显示相同的图像。现在我只是分别再次遍历数组，这当然会导致所有图像打印在同一个元素内，正如预期的那样。

我不确定如何 link 将两者结合在一起并将 npc.npcImg 传递给操作 sheet 组件。

非常感谢您的帮助。

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：将数据从模板元素传递到另一个

VueJS: Pass data from template element to another

vue.js

html-framework-7