Question

我正在尝试在我的vue组件中显示数据，并且我有一个包含对象的数组。如果我尝试使用

<div class="bar">
    {{playersStats[0]}}
</div>

显示

{ "GP": 13, "GS": 6, "MPG": 20.74, "PPG": 12.85, "FGM": 4.46, "FGA": 9.77, "FGP": 0.46 }

但如果我尝试使用

<div class="bar">
    <span v-if="playersStats[0]">{{playersStats[0].GS}}</span>
</div>

已编辑Javascript：

export default {
    data: function(){
        return {
            showPlayersSelection: true,
            selectedPlayers: [],
            playersStats: []
        }
    },
    methods: {
        selectPlayers(player) {
            if(this.selectedPlayers.length < 2){
                this.selectedPlayers.push(player);
                if(this.selectedPlayers.length == 2){
                    this.getPlayerStats(this.selectedPlayers[0][0], this.selectedPlayers[1][0]);
                    this.showPlayersSelection = false;
                }
            } 
            return false;
        },
        getPlayerStats(player1, player2) {
            let self = this;
            axios.get(config.API.URL + config.API.STATS, {
                params: {
                    'player1Id': player1,
                    'player2Id': player2
                }
            })
            .then( (response) => {
                if(response.status == 200 && typeof(response.data) == 'object'){
                    self.playersStats = [];
                    self.playersStats.push(response.data[0][0]);
                    self.playersStats.push(response.data[1][0]);
                }
            });
        },
    }
}

即使在DOM中也没有显示任何内容。我怎样才能显示数据？

Answer 1

<span v-if="playersStats[0]">{{playersStats[0]["GS"]}}</span>

也许你需要这个？

Vue JS无法显示数据

1 个答案: