仅从列表中渲染一次 Vue 3答案

【问题标题】：Render value from List only once Vue 3仅从列表中渲染一次 Vue 3
【发布时间】：2021-05-31 05:53:09
【问题描述】：

我正在使用 v-for 使用 Vue 渲染 JSON 列表中的所有内容。我有以下结构的 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，但是......所有这些都在两张卡上。

所以Cards 和id: 0 将有两个图标，而id: 1 将只有一个图标。我怎样才能让services 只为他们所在的卡渲染？

编辑 2：（解决方案）一切都像这样完美地工作......我只是犯了一个错误，并且在造成我错误的组件上方有另一个v-for。我在这里发布的这段代码是正确的。

【问题讨论】：

标签： javascript json vuejs3

【解决方案1】：

阿霍伊西蒙，

你能澄清一下问题是什么吗？似乎工作正常（虽然我使用了fontawesome 没有vue-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>

【讨论】：