如何从 Vue 3 中的列表中获取列表中的所有值

Question

我有卡片列表...每张卡片都有一些 name, description, price，但里面还有另一个名为 services 的列表。我正在尝试将列表 services 放入 font-awesome-icon 的输出中，这样我就可以存储图标并将它们传递给函数 v-for。

Cards: [{
    name: "Dvoulůžkový pokoj",
    description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do " +
        "eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur " +
        "adipisicing elit, sed do eiusmod tempor incididunt.",
    price: "2500",
    services: [{
        icon: "1"
    }, {
        icon: "2"
    }, {
        icon: "3"
    }, {
        icon: "4"
    }]
}]

到目前为止，我能够获得 services 的完整列表并显示如下输出：
[ { "icon": "1" }, { "icon": "2" }, { "icon": "3" }, { "icon": "4" } ]

<p v-for="services in Cards" :key="services">{{ services.services }}</p>

如何逐一获取这些值并进行渲染？

下一部分是关于将 icon 的值从“1,2,3,4”更改为 fas.faPhone，这应该从 FontAwesome 库中获取图标。在此之后我需要将这个图标放入下面的代码中：

<div v-for="icon in Cards" :key="icon">
    <font-awesome-icon :icon="icon.services" />
</div>

所以它会一个一个地显示图标。我怎样才能做到这一点？有没有其他或更有效的方法呢？

编辑 1：
我已经能够通过以下方式渲染 services 列表中的第一个图标：

<div v-for="(icons, index) in Cards" :key="index">
  <font-awesome-icon :icon="icons.services.values().next().value.icon" />
</div>

如何呈现列表的每个值而不仅仅是第一个值？

Answer 1

你可以只添加一个嵌套的 v-for

<div v-for="(card, index) in Cards" :key="`card-${index}`">
   <template v-for="(icon, icon_idx) in card.services">
      <font-awesome-icon :icon="icon.icon" :key="`icon-${icon_idx}`" />
   </template>
</div>

如何从 Vue 3 中的列表中获取列表中的所有值

How to get all value from List inside List in Vue 3

javascript

list

font-awesome

vue.js

vuejs3