Vue JS 无法显示数据答案

【问题标题】：Vue JS unable to display dataVue JS 无法显示数据
【发布时间】：2017-11-30 14:31:52
【问题描述】：

我正在尝试在我的 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 中也不显示任何内容。我怎样才能显示数据？

【问题讨论】：

数据从何而来？也许您需要返回 response.json()？你能分享一下这个问题吗？
如果你这样做<div class="bar"> {{playersStats[0].GS}} </div>会发生什么？
工作正常in a fiddle
大家好，我已经在上面添加了我的 javascript 代码，希望对您有所帮助

标签： javascript data-binding vue.js frontend vue-component

【解决方案1】：

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

也许你需要这个？

【讨论】：