質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

9432閲覧

Vue.jsのcomputedでのaxios通信

tampopopofu

総合スコア22

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

2クリップ

投稿2019/03/24 07:59

前提・実現したいこと

computed内でaxiosのGET通信から値を取得して表示したい。

※computedのメソッドはリアクティブに検知されているものとします。
以下はvueファイルのtemplate部分です。

vue

1<template> 2 <div>{{ computedTest }}<div> 3</template>

試したこと

  • computed内にcomputedTest()というメソッドを作り、何もしないで任意の文字列をreturnした。

→ 文字列がそのまま表示された。(OK)

js

1computed: { 2 computedTest() { 3 let aa = 'あああ'; 4 return aa; 5 } 6} 7// あああ
  • axiosを使ってGET通信

→ 何も表示されない。

js

1computed: { 2 computedTest() { 3 let aa = ''; 4 axios.get('xxxxx').then(function(res) { 5 aa = res.data.xxx; 6 }); 7 return aa; 8 } 9} 10// 非同期通信なので、先に「return aa」が走ってしまうため、''が表示される。

質問

上記の「試したこと」の2番目を改善し、async/awaitを使ってaxios通信が完了してから「return aa」するようにしましたが、何も表示されません。
考え方、やり方が間違っているのでしょうか?

js

1computed: { 2 async computedTest() { 3 let aa = ''; 4 await axios.get('xxxxx').then(function(res) { 5 aa = res.data.xxx; 6 }); 7 return aa; 8 } 9} 10// 何も表示されない

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

computed では非同期処理はサポートされてません。
何らかのパラメータの変更に応じて再度通信を実行したいということだと思いますので、data と watch の組み合わせでなんとかなります。

どうしても computed でやりたいのなら vue-async-computed というプラグインがあるのでそちらを使ってみるというのも手かもしれません。

投稿2019/03/24 12:46

yhg

総合スコア2161

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tampopopofu

2019/03/30 05:41

ご回答ありがとうございます! そうなんですね。`computed`から非同期処理はできないことは知りませんでした。 おかげさまでスッキリしました。 ‘computedTest()‘は`methods`内に入れ、外から直接それを使うようにします。 どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問