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