vue.jsのhttpリクエストから配列にプッシュしようとしたときのエラー

若い原田

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はsite.js:21の関数ではありません

ヘルナンデス王子

問題はhttps://api.coindesk.com/v1/bpi/currentprice.jsonbpiエントリから応答がであるObjectためpush、の関数であるため使用できないことですArray Object

2つのオプションがあります:

  1. 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};
            });
    }
    
  2. オブジェクトを配列に変換してからプッシュ

    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};
            });
    }
    

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Laravel + Vue Js:Axiosリクエストからの応答を取得するときにブートストラップ4モーダルを非表示にするにはどうすればよいですか?

分類Dev

オブジェクトの最後の要素をスプライスしようとしたときのVue2エラー

分類Dev

VueとFirebaseの問題:エラー:関数がリクエストスコープ外でクラッシュしました関数の呼び出しが中断されました

分類Dev

Vue.jsのAPIへのすべてのリクエストのクエリをjson文字列にバインドしようとしています

分類Dev

配列内のオブジェクトをフリーズしてから変更しようとしたときのv-modelと:valueのVue.jsの違い

分類Dev

配列でv-modelを使用しているときに、vue.jsから未定義エラーの読み取り不能プロパティを取得する

分類Dev

Vue / Nuxtのhtml、body、および__nuxt要素をターゲットにしてクラスを追加しようとしたときにエラーが発生しました

分類Dev

vueからlaravelへのaxiosput / patchリクエストの作成中に405エラーが発生しました

分類Dev

JSONファイルのURLに対してGETリクエストを作成し、そのレスポンスを保存して、Vue.jsアプリケーションの起動時にグローバルに使用できるようにしますか?

分類Dev

ブートストラップ-VUE - VUE JSのドロップダウンとして表示配列データ

分類Dev

Vue.jsアプリはhttp:// localhost:8080で実行され、バックエンドAPIに対してaxiosを使用してGETリクエストを行うと、ローカルホストがURLの先頭に追加されます

分類Dev

Vue + VuexプロジェクトにVegaチャートを埋め込もうとしたときにキャッチされなかったエラー

分類Dev

Vueでメールリンクを作成しようとしたときにテンプレートのコンパイル中にエラーが発生しました

分類Dev

vueとwebpackを使用してkeycloak-jsをインストールしようとしたときにキャッチされないタイプエラー:__ WEBPACK_IMPORTED_MODULE_3_keycloak_js__は関数ではありません

分類Dev

Vueの質問:リンクをクリックしたときにメニューを閉じるにはどうすればよいですか?

分類Dev

オブジェクトの配列内の要素をAPIから新しい配列vue.jsにプッシュする方法

分類Dev

select on vueのオプションをクリックしたときに値を取得するにはどうすればよいですか?

分類Dev

vue.jsとAirtableを使用した複数のaxiosリクエスト

分類Dev

Vueルーターはパスのクエリ文字列を保持する方法を「プッシュ」します

分類Dev

Vueルーターはパスのクエリ文字列を保持する方法を「プッシュ」します

分類Dev

Vue.jsのボタンをクリックしたときにアラート機能が機能しないのはなぜですか

分類Dev

私は2つの配列-ユーザーとonlineUsersを持っていますが、Vue.jsを使用してすべてのユーザーをループして表示し、そのユーザーが両方の配列に存在する場合にクラスを適用するにはどうすればよいですか?

分類Dev

解決方法:[Vue警告]:vue.js 2でコンポーネントをレンダリングするときにエラーが発生しましたか?

分類Dev

Vue.js-ファイルのインポートが少なくなると、「モジュールのビルドに失敗しました」というエラーが発生し、「解決できません」../assets/file.less '

分類Dev

import {}を使用すると、Vue.jsエラーのエクスポートが見つかりませんでした

分類Dev

Vue.jsのマウントされたフックから送信されたAJAXGETリクエストが常にブラウザキャッシュを無視するのはなぜですか?

分類Dev

キーを持つ配列としてのvue-routerクエリパラメータ

分類Dev

スラッシュ( '/')をパラメーターとして含む文字列をvue.jsのルートに渡す方法

分類Dev

CLIによって生成された新しいVue 3プロジェクトからユニットテストでエラーを取得する

Related 関連記事

  1. 1

    Laravel + Vue Js:Axiosリクエストからの応答を取得するときにブートストラップ4モーダルを非表示にするにはどうすればよいですか?

  2. 2

    オブジェクトの最後の要素をスプライスしようとしたときのVue2エラー

  3. 3

    VueとFirebaseの問題:エラー:関数がリクエストスコープ外でクラッシュしました関数の呼び出しが中断されました

  4. 4

    Vue.jsのAPIへのすべてのリクエストのクエリをjson文字列にバインドしようとしています

  5. 5

    配列内のオブジェクトをフリーズしてから変更しようとしたときのv-modelと:valueのVue.jsの違い

  6. 6

    配列でv-modelを使用しているときに、vue.jsから未定義エラーの読み取り不能プロパティを取得する

  7. 7

    Vue / Nuxtのhtml、body、および__nuxt要素をターゲットにしてクラスを追加しようとしたときにエラーが発生しました

  8. 8

    vueからlaravelへのaxiosput / patchリクエストの作成中に405エラーが発生しました

  9. 9

    JSONファイルのURLに対してGETリクエストを作成し、そのレスポンスを保存して、Vue.jsアプリケーションの起動時にグローバルに使用できるようにしますか?

  10. 10

    ブートストラップ-VUE - VUE JSのドロップダウンとして表示配列データ

  11. 11

    Vue.jsアプリはhttp:// localhost:8080で実行され、バックエンドAPIに対してaxiosを使用してGETリクエストを行うと、ローカルホストがURLの先頭に追加されます

  12. 12

    Vue + VuexプロジェクトにVegaチャートを埋め込もうとしたときにキャッチされなかったエラー

  13. 13

    Vueでメールリンクを作成しようとしたときにテンプレートのコンパイル中にエラーが発生しました

  14. 14

    vueとwebpackを使用してkeycloak-jsをインストールしようとしたときにキャッチされないタイプエラー:__ WEBPACK_IMPORTED_MODULE_3_keycloak_js__は関数ではありません

  15. 15

    Vueの質問:リンクをクリックしたときにメニューを閉じるにはどうすればよいですか?

  16. 16

    オブジェクトの配列内の要素をAPIから新しい配列vue.jsにプッシュする方法

  17. 17

    select on vueのオプションをクリックしたときに値を取得するにはどうすればよいですか?

  18. 18

    vue.jsとAirtableを使用した複数のaxiosリクエスト

  19. 19

    Vueルーターはパスのクエリ文字列を保持する方法を「プッシュ」します

  20. 20

    Vueルーターはパスのクエリ文字列を保持する方法を「プッシュ」します

  21. 21

    Vue.jsのボタンをクリックしたときにアラート機能が機能しないのはなぜですか

  22. 22

    私は2つの配列-ユーザーとonlineUsersを持っていますが、Vue.jsを使用してすべてのユーザーをループして表示し、そのユーザーが両方の配列に存在する場合にクラスを適用するにはどうすればよいですか?

  23. 23

    解決方法:[Vue警告]:vue.js 2でコンポーネントをレンダリングするときにエラーが発生しましたか?

  24. 24

    Vue.js-ファイルのインポートが少なくなると、「モジュールのビルドに失敗しました」というエラーが発生し、「解決できません」../assets/file.less '

  25. 25

    import {}を使用すると、Vue.jsエラーのエクスポートが見つかりませんでした

  26. 26

    Vue.jsのマウントされたフックから送信されたAJAXGETリクエストが常にブラウザキャッシュを無視するのはなぜですか?

  27. 27

    キーを持つ配列としてのvue-routerクエリパラメータ

  28. 28

    スラッシュ( '/')をパラメーターとして含む文字列をvue.jsのルートに渡す方法

  29. 29

    CLIによって生成された新しいVue 3プロジェクトからユニットテストでエラーを取得する

ホットタグ

アーカイブ