仅从列表中渲染一次 Vue 3

Question

I am using v-for to render everything from JSON List with Vue. I have JSON file of following structure:

{
  "Cards": [
    {
      "id": 0,
      "name": "TITLE",
      "description": "Lorem ipsum",
      "price": "2500",
      "services": [
        {
          "icons": [
            {
              "pre": "fas",
              "icon": "male",
              "tooltip": "Maximum number of people",
              "after": "2"
            },
            {
              "pre": "fas",
              "icon": "bed",
              "tooltip": "Number of beds",
              "after": "2 + (side bed)"
            }
          ]
        },
        {
          "icons": [
            {
              "pre": "fas",
              "icon": "coffee",
              "tooltip": "Services",
              "after": "TV, Wi-Fi, parking"
            }
          ]
        }
      ]
    },
    {
      "id": 1,
      "name": "TITLE",
      "description": "Lorem ipsum",
      "price": "3200",
      "services": [
        {
          "icons": [
            {
              "pre": "fas",
              "icon": "female",
              "tooltip": "Maximum number of people",
              "after": "2"
            }
          ]
        }
      ]
    }
  ]
}

This is my current structure for rendering:

 <div v-for="(card, index) in Cards":key="index"> <div> <template v-for="(icons, icon_ids) in card.services":key="icon_ids"> <div> <template v-for="(icon, icon_idx) in icons.icons":key="icon_idx"> <div> <font-awesome-icon:icon="[icon.pre, icon.icon]"/> <span>{{icon.after}} <sup v-if="icon.sup.= null">{{icon.sup}}</sup> </span> <span class="tip-inner">{{ icon.tooltip }}</span> </div> </template> </div> </template> </div> </div>

EDIT 1: By this all my icons from services renderes twice in each card. On first card should be only man , bed , coffee and on the other card should be woman but... All of the are at both cards.

So Cards with id: 0 would have two icons and id: 1 would have only one icon. How can I make to render services only for the card they are under?

EDIT 2: ( Solution ) Everything works perfectly like this... I just made mistake and had another v-for above the component which created my mistake. This code I posted here is correct.

Answer 1

Ahoj Šimon,

Can you clarify what the issue is? Seems to be working ok (although I used fontawesome without vue-fontawesome , maybe :icon="[icon.pre, icon.icon]" is giving you unexpected results.)

 const Cards = [ { "id": 0, "name": "TITLE", "description": "Lorem ipsum", "price": "2500", "services": [ { "icons": [ { "pre": "fas", "icon": "male", "tooltip": "Maximum number of people", "after": "2" }, { "pre": "fas", "icon": "bed", "tooltip": "Number of beds", "after": "2 + (side bed)" } ] }, { "icons": [ { "pre": "fas", "icon": "coffee", "tooltip": "Services", "after": "TV, Wi-Fi, parking" } ] } ] }, { "id": 1, "name": "TITLE", "description": "Lorem ipsum", "price": "3200", "services": [ { "icons": [ { "pre": "fas", "icon": "female", "tooltip": "Maximum number of people", "after": "2" } ] } ] } ]; Vue.createApp({ setup() { return { Cards } } }).mount("#app");

 .card{display:block; border: 1px solid black;padding:8px;margin:8px;border-radius:4px;}.icon{font-size: 1em; color: Tomato; min-width:30px;display:inline-block;text-align:center;}.tip-inner{color:#aaa;}

 <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.prod.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> <div id="app"> <div v-for="(card, index) in Cards":key="index" class="card"> <div> <template v-for="(icons, icon_ids) in card.services":key="icon_ids"> <div> <template v-for="(icon, icon_idx) in icons.icons":key="icon_idx"> <div> <span class="icon"><i:class="icon.pre + ' fa-' + icon.icon"></i></span> <span>{{icon.after}} <sup v-if="icon.sup.= null">{{icon.sup}}</sup> </span> <span class="tip-inner">{{ icon.tooltip }}</span> </div> </template> </div> </template> </div> </div> </div>