Vue - Доступ к атрибутам в словаре Django

В Vue использование {{ game.data }} приводит к:

[ { { "game": 1, "turn": 1, "player": 1, "word": "trend", "score": 18 }, { "game": 1, "turn": 2, "player": 2, "word": "тест", "счет": 12 } ]

Но я хочу получить доступ к {{ game.data.player }}

Мой models.py

class Game(models.Model):
date = models.DateTimeField(auto_now_add=True)
def __str__(self):
    return str(self.id)


class Word(models.Model):
    game = models.ForeignKey(Game, related_name='word', on_delete=models.CASCADE)
    turn = models.IntegerField()
    player = models.ForeignKey(User, on_delete=models.CASCADE)
    word = models.CharField(max_length=255)
    score = models.IntegerField()

serializers.py

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

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

 def get_data(self, obj):
    return WordSerializer(obj.word, many=True).data

Game.vue

<script>
    import axios from 'axios'
   
    export default { 
        name: 'Game',
        
        data() { 
            return { 
                game: {},               
            }
        },
        mounted() { 
            this.getGame()
            
        },
        methods: { 
            async getGame() { 
                this.$store.commit('setIsLoading', true)

                const GameID = this.$route.params.id

                axios
                    .get(`/api/v1/games/${GameID}/`)
                    .then(response => { 
                        this.game = response.data
                    })
                    .catch(error => { 
                        console.log(error)
                    })

                this.$store.commit('setIsLoading', false)
            }
        }
    }         
</script>

Заранее спасибо,

Вы можете просто достичь этого, итерируя массив game.data в шаблоне HTML с помощью директивы v-for.

Live Demo :

new Vue({
  el: '#app',
  data: {
    game: {}
  },
  mounted() {
    this.game = {
      data: [{
        "game": 1,
        "turn": 1,
        "player": 1,
        "word": "trend",
        "score": 18
      }, {
        "game": 1,
        "turn": 2,
        "player": 2,
        "word": "test",
        "score": 12
      }]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-for="(g, index) in game.data" :key="index">
    {{ g.player }}
  </p>
</div>

Вернуться на верх