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

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

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

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

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

3862閲覧

Axiosのgetで受け取れるres.dataをメソッドの返り値としてreturnできない

tenlife

総合スコア70

Vue.js

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

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

1グッド

0クリップ

投稿2020/07/29 22:47

編集2020/07/30 02:08

vue.jsでaxiosのgetアクションを使用してlaravelから帰ってくる値を取得して表示するという処理についてです。

解決したいこと {{find_user(hope.user_id)}}を呼び出した際にreturnで値を返して表示させたい。

現状: console.log(res.data.name)で値は確認できるが、returnではview側に表示されない。

     <div v-for="hope in hopes" :key="hope.id"> <tr> <th scope="row">{{hope.id}}</th> <td>{{find_user(hope.user_id)}}</td> <td>{{hope.text}}</td> </tr> </div> 省略。。 props: ['hopes'], methods: { find_user(here_user_id) { axios.get(example-path).then(res => { console.log(res.data.name)      return res.data.name }).catch(function(error){ console.log(error) }) } }

メソッドの返り値(name)をそのままviewに表示したいと思っているのですが、
getの場合はreturnで返り値をそのままviewに表示ということはできないのでしょうか?

確認したサイト
https://teratail.com/questions/235618

どなたかお分かりになる方居ましたら、ご教授いただきたいです。
よろしくお願いします。

vue.js 2.6.1
laravel 7.2

追記
最初は以下のようにやっていたのですが、以下の部分を省略できないかと考えました。

<td>{{find_user(hope.user_id)}}</td> <td>{{name}}</td>

created()でfind_userを呼び出そうかと考えましたが、hope.user_idをどう持ってこようかというところで悩んでいます。

<div v-for="hope in hopes_array" :key="hope.id"> <tr> <th scope="row">{{hope.id}}</th> <td>{{find_user(hope.user_id)}}</td> <td>{{name}}</td> <td>{{hope.text}}</td> </tr> </div> 省略... data() { return { hopes_array: this.hopes, name: '' } }, 省略... find_user(here_user_id) { let id = this.room.id let get_path = ["http://127.0.0.1:8000/room/", id, "/find/"]; let here_path = get_path.join('') axios.get(here_path + here_user_id).then(res => { return this.name = res.data.name }).catch(function(error){ console.log(error) }) },
FrontEnd_Japan👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

vueのお作法として公式ドキュメントにも記載がありますが、
data(){}に戻り値を格納する変数を設定する必要があります。

この方法を用いずにreturnviewに展開したいということでしょうか。

投稿2020/07/30 01:44

FrontEnd_Japan

総合スコア271

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

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

tenlife

2020/07/30 02:11

コメントありがとうございます! 最初は説明されている通りdataを使って表示していました。 -> この方法を用いずにreturnをviewに展開したいということでしょうか。 その通りです。追記の部分にも書きましたがcreatedなどを使えば省略可能では無いかと考えているところです。
FrontEnd_Japan

2020/07/30 03:07 編集

vueは再帰的にdataオブジェクトを監視しています。 レンダリング時にmethodsが定義されていないので戻り値が取得できないのです。 created()でmethodsを実行してdataオブジェクトに値を設定するか、 created()でdataオブジェクトに値を設定するほかないと思います。
tenlife

2020/08/03 02:56

連絡遅れました。 教えていただいた通り、created()でmethodsを実行してdataオブジェクトに値を設定の流れで実装しました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問