iT邦幫忙

0

Vue v-for 巢狀JSON

juju 2022-03-17 16:09:511466 瀏覽
  • 分享至 

  • xImage

標題不太知道怎麼描述,目前正在寫一個訂單查詢的畫面,
利用v-for把資料顯示在畫面上沒問題,但後來希望能夠同時顯示訂單明細,所以希望能夠在紅色區域顯示訂單明細,但是目前不知道寫出來都無法正確顯示,所以想請教一下各位該怎麼顯示dtlData這個json字串,謝謝。

https://ithelp.ithome.com.tw/upload/images/20220317/20119913Q94tEZ2sWj.png

資料如下:

[
    {
      "sdID": "SD202203150001",
      "dtlData": "[{\"id\":\"01\",\"specification\":\"\",\"materialName1\":\"工具組1\",\"quantity\":1}]"
    },
    {
      "sdID": "SD202203150002",
      "dtlData": "[{\"id\":\"02\",\"specification\":\"\",\"materialName1\":\"螺絲\",\"quantity\":1}]"
    }
  ]

程式:

<div class="order__manage__table" v-for="(option, index) in SDList">

    
    訂單明細:
    <template v-for="(item , indexDtl) in option.dtlData">
        {{item.id}}
    </template>


    <hr style="border-top: dashed black;">
    <br />


</div>
yorklin iT邦新手 5 級 ‧ 2022-03-18 17:01:03 檢舉
雖然是昨天的,不過最近有類似需求,看看是不是你要的
查到的範例: https://codesandbox.io/s/stack-56402577-4o6gv?file=/src/components/NestedTables.vue:89-2382
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
Zero皇
iT邦研究生 2 級 ‧ 2022-03-17 18:35:47
最佳解答

直接在v-for裡面用JSON.parse()把他轉成JSON讀,再去寫成你要的table,這樣如何?

<div class="order__manage__table" v-for="(option, index) in SDList">
訂單明細:
<template v-for="(item , indexDtl) in JSON.parse(option.dtlData)">
{{item.id}}、{{item.specification}}、{{item.materialName1}}、{{item.quantity}}
</template>
<hr style="border-top: dashed black" />
<br />
</div>
juju iT邦新手 5 級 ‧ 2022-03-17 22:04:18 檢舉

感謝幫助^^

Zero皇 iT邦研究生 2 級 ‧ 2022-03-18 08:21:39 檢舉

/images/emoticon/emoticon12.gif

我要發表回答

立即登入回答