javascript - 尝试从 vue.js 中的 http 请求推送到数组时出错

Question

我正在尝试将对象推送到 axios get 请求的响应中，但我总是收到“推送不是函数”错误

我正在尝试插入 http 请求的 .then 块

ps:我正在按照 vuejs 站点的示例进行操作

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        bitCoinValue: null
    },
    mounted() {
        this.getBitcoinValue();
    },
    filters: {
        currencydecimal(value) {
            return value.toFixed(2);
        } 
    },
    methods: {
        getBitcoinValue: function () {
            axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .then(response => {
                    this.bitCoinValue = response.data.bpi || [];
                    this.bitCoinValue.push({code: 'BRL', description: 'Reais', symbol: 'R$', rate_float: 25.50});
                });
        }
    }
})

这是错误消息:

Uncaught (in promise) TypeError: this.bitCoinValue.push is not a function at site.js:21

Answer 1

问题是您来自 https://api.coindesk.com/v1/bpi/currentprice.json 的回复bpi条目是 Object因此您不能使用 push因为它是 Array Object 的函数.

你有两个选择:

将您的值设置为 api 响应的类似方法

getBitcoinValue: function () {
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
            this.bitCoinValue = response.data.bpi || [];
            this.bitCoinValue['BRL'] = {code: 'BRL', description: 'Reais', symbol: 'R$', rate_float: 25.50};
        });
}

将对象转换为数组然后推送

getBitcoinValue: function () {
    axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
        .then(response => {
            let objectResponse = response.data.bpi || {};
            this.bitconValue = Object.values(objectResponse).map(item => item)
            this.bitCoinValue['BRL'] = {code: 'BRL', description: 'Reais', symbol: 'R$', rate_float: 25.50};
        });
}