Vue.js でネストされたキーの JSON オブジェクトを検索する方法

Question

VUEjs アプリケーションで Django API のユーザー リストからユーザーを表示しようとしています。

API のユーザー リスト データ:

{
  「カウント」: 1、
  「次」: null、
  「前」: null、
  「結果」: [
    {
      「URL」: 「http://localhost:8000/v1/users/1/」、
      "ユーザー名": "管理者"、
      「電子メール」: 「admin@example.com」、
      「グループ」: []
    }
  】
}

私の VUE コード:

<テンプレート>
    <div>
        <h1> ユーザー </h1>
        <div v-for="APIData の結果" :result="結果" :key="results.username">
            <h5>{{ result.username }}</h5>
            <p>{{ result.email }}</p>
        </div>
    </div>
</テンプレート>

<スクリプト>
import { getAPI } から '../axios-api';
'vuex' から {mapState} をインポートします。

デフォルトのエクスポート {
    名前: 'ユーザー'、
    計算済み:mapState(['APIData'])、
    作成した（） {
        getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' this.$store.state.accessToken } })
        .then(応答 => {
            this.$store.state.APIData = 応答.データ
        })
        .catch(error => {
            コンソールログ(エラー)
        })
    }
}
</script>

何らかの理由で、API リクエストが成功し、データがネットワーク タブに表示されていることがわかりますが、データは Web ページに表示されません。ユーザーの表示方法は正しいですか?それとも何かが足りないのでしょうか？

私は VUEjs を初めて使用します。誰か助けてくれませんか?

Answer 1

問題は v-for にあります。 v-for="results in APIData.results" を使用してみてください。「results」はアクセサーではなく、指定する値であるためです。配列 各値には名前が割り当てられますが、APIData は配列ではありません。

Answer 2

APIData の results をループするだけの場合:

リーリー リーリー