nuxt.js で取得したjsonデータを表示する方法

Question

以下のようなjsonデータがあります。

{ "status": 200, "data": [ { "id": 11111, "name": "tanaka" },{ "id": 22222, "name": "satou" },{ "id": 33333, "name": "yamada" } ] }

以下のように nuxt.jsで取得までできたのですが、表示がうまくいきません。
おそらくループ文で書く必要があるとおもうのですが、nuxt.jsでループ文を調べても情報が見つかりませんでした。
dataの中にある3人のIDと名前を表示させるにはどのようにすればいいのでしょうか。。

<template>
  <section class="container">
    <h1>json取得画面</h1>
    #200が取得できる#
   <h1>{{jsondata.status}}</h1>
    # idの取得ができない　ループ文が必要？#
   <h1>{{jsondata.data.id}}</h1>
    # nameの取得ができない　ループ文が必要？#
   <h1>{{jsondata.data.name}}</h1>
  </section>

</template>

<script>
import axios from 'axios'
export default {
  async asyncData ({ store, params }) {
    const logininfo = { login_id : store.state.auth.uid }
    // ログイン情報からjsonデータを取得
    let { data } = await 
    axios.post(`http://localhost:3000/test`,logininfo)
    return { jsondata: data }
  }
}

</script>

Answer 1

<li v-for="item in jsondata.data"> 
    <span>{{ item.id }}</span> 
    <span>{{ item.name }}</span>
</li>

こんな感じでv-forで取得出来ないでしょうか？

Comments

[kakeiteiya]

ありがとうございます

` error Elements in iteration expect to have 'v-bind:key' directives `

というエラーがでました、、

[kakeiteiya]

<div v-for="item in jsondata.data" v-bind:key="item.id">
<span>{{ item.id }}</span>
<span>{{ item.name }}</span>
</div>

これで解決できました

[LanHma]

すいません！keyが必要でした！解決出来てよかったです！