Vue中如何访问Django接口返回的game.data数组内的player属性？

你当前的核心问题有两个：

• game.data是数组类型（包含多个Word对象），直接通过{{ game.data.player }}访问会失效，因为数组本身没有player属性，必须访问数组内的具体元素
• 当前接口返回的player仅为用户ID，若需要用户的具体属性（如用户名），还需修改Django序列化逻辑

一、Vue中正确访问数组内的player属性 #

1. 遍历所有记录（推荐用于列表展示） #

使用v-for遍历game.data数组，逐个访问每个元素的player属性：

<template>
  <div v-if="game.data">
    <div v-for="(record, idx) in game.data" :key="idx">
      第{{ record.turn }}回合 - 玩家ID：{{ record.player }} | 单词：{{ record.word }} | 得分：{{ record.score }}
    </div>
  </div>
</template>

2. 访问单个指定元素 #

如果只需要某一条记录的player属性，直接通过数组索引访问：

<template>
  <div v-if="game.data && game.data.length > 0">
    第一回合玩家ID：{{ game.data[0].player }}
  </div>
</template>

添加v-if判断可避免数据未加载完成时出现undefined报错。

二、修改序列化器，返回玩家的具体属性（而非仅ID） #

若你需要的不是玩家ID，而是用户名、邮箱等用户属性，需调整Django序列化逻辑：

1. 新增用户序列化器 #

在serializers.py中添加：

from django.contrib.auth.models import User
from rest_framework import serializers

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'email']  # 按需选择需要返回的用户字段

2. 完善Word序列化器 #

补充完整WordSerializer并嵌套用户序列化：

class WordSerializer(serializers.ModelSerializer):
    # 嵌套UserSerializer，返回玩家详情
    player = UserSerializer(read_only=True)

    class Meta:
        model = Word
        fields = ['game', 'turn', 'player', 'word', 'score']

3. 修正GameSerializer的缩进问题 #

注意Python对缩进敏感，确保get_data方法与class Meta同级：

class GameSerializer(serializers.ModelSerializer):
    data = serializers.SerializerMethodField(read_only=True)

    class Meta:
        model = Game
        fields = ['id', 'date' ,'data']

    # 方法需与class Meta同级
    def get_data(self, obj):
        return WordSerializer(obj.word, many=True).data

修改后，接口返回的player会变为包含用户属性的对象，示例如下：

{
  "game": 1,
  "turn": 1,
  "player": {
    "id": 1,
    "username": "test_user",
    "email": "test@example.com"
  },
  "word": "trend",
  "score": 18
}

此时在Vue中可直接访问record.player.username这类属性。

内容的提问来源于stack exchange，提问作者Phaneuf