僅從列表中渲染一次 Vue 3

Question

我正在使用v-for來渲染 JSON List 和 Vue 中的所有內容。 我有以下結構的 JSON 文件：

{
  "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"
            }
          ]
        }
      ]
    }
  ]
}

這是我當前的渲染結構：

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

編輯 1：由此，我所有來自services的icons在每張卡中呈現兩次。 第一張卡片上應該只有man 、 bed 、 coffee ，另一張卡片上應該是woman ，但是……所有這些都在兩張卡片上。

所以id: 0的Cards有兩個圖標，而id: 1的卡片只有一個圖標。 我怎樣才能只為他們所使用的卡提供services ？

編輯2：（解決方案）一切都像這樣完美地工作......我只是犯了錯誤，並且在造成我錯誤的組件上方有另一個v-for 。 我在這里發布的這段代碼是正確的。

Answer 1

阿霍伊·西蒙，

你能澄清一下問題是什么嗎？ 似乎工作正常（雖然我在沒有vue-fontawesome fontawesome下使用了 fontawesome ，但也許:icon="[icon.pre, icon.icon]"會給你帶來意想不到的結果。）

 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>