多個 v-for 從 Vue.js 中的嵌套 JSON 數組中獲取值

Question

我正在從外部 API 獲取數據並填充表以顯示 JSON 數據。 JSON 數據有多個嵌套數組，實際上數據是用於“訂單”的。 所以我試圖在一個單元格中獲取訂單的項目，為此我使用了“v-if”，但我無法存檔。 我為以下代碼獲得的結果是單獨列中訂單的每個項目，但我試圖查看一個單元格和其他“元數據”中的項目

下面是JSON數據結構

"line_items": [{
    "name": "Salat",
    "meta_data": [{
        "id": 11500,
        "key": "size",
        "value": "full"
      },
      {
        "id": 1150001,
        "key": "Dressing",
        "value": "green"
      }
    ],
    "price": 4.28571399999999957941554384888149797916412353515625
  },
  {
    "name": "Chicken",
    "meta_data": [{
        "id": 115111112,
        "key": "size",
        "value": "Normal (7,00 €)"
      },
      {
        "id": 1151111113,
        "key": "Extra sauce",
        "value": "Bbq(0,50 €)"
      }
    ],
    "price": 7.14285700000000023379698177450336515903472900390625
  },
]

這就是我創建表格的方式

<table class="table table-bordered" id="table">
  <thead>
    <tr>
      <th scope="col">Order Id</th>
      <th scope="col">Name</th>
      <th scope="col">Items</th>
    </tr>
  </thead>
  <tbody>
    <tr 
      v-for="(order, index) in orders"
      :key="order.id"
      :class="{highlight: !order.is_printed}"
    >
      <td>{{ order.id }}</td>
      <td>{{ order.billing.first_name + " " +order.billing.last_name }}</td>
      <!-- <td>{{ order.line_items[].name}} </td>-->
      <td v-for="(items, index) in order.line_items">{{items.name}}</td>
    </tr>
  </tbody>
</table>

我如何存檔以獲取一個單元格中訂單項的名稱和元數據。

建議會有很大幫助。

謝謝

Answer 1

通過在模板中的<td>元素上使用v-for ，這意味着您將為order.line_items數組中的每個項目創建一個<td> 。 要在單個<td>單元格中呈現所有這些項目，您需要將 v-for放在<td> 。 無序列表 ( <ul> ) 可能是合適的 HTML 元素。 例如：

<td>
    <ul>
        <li v-for="(items, index) in order.line_items">{{items.name}}</li>
    </ul>
</td>

我已經創建了一個小提琴供您參考。