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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

531閲覧

[Vue.js] APIで取得し、dataに格納したものを'this.'で取得できない

tenten11055

総合スコア67

Vue.js

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2019/12/07 16:38

編集2019/12/07 16:51

#起こっていること
axiosでオブジェクトを取得し、dataに定義したsu_companyに詰めているものの、
this.su_companyで取得することができません。

#ソース

vue

1<template> 2 <div> 3 <router-view :su_company.sync="su_company" :capital_units.sync="capital_units"></router-view> 4 </div> 5</template> 6 7<script> 8 export default { 9 data() { 10 return { 11 su_company: {}, 12 capital_units: { 13 us_dollar: 'USドル', 14 yen: '円', 15 yuan: '元' 16 } 17 } 18 }, 19 mounted() { 20 this.fetchSuCompany(); 21 console.log(this) 22 console.log(this.su_company) 23 console.log(this.capital_units) 24 25 }, 26 methods: { 27 fetchSuCompany: function() { 28 this.$auth.api.get(`su_companies/${this.$route.params.id}/edit`) 29 .then(response => (this.su_company = response.data)); 30 } 31 } 32 } 33 34</script>

#APIで取得したJSON

json

1{"company_name":"優良企業", 2"company_hp":"https://hogehoge.com", 3"establishment_year":2019, 4"establishment_month":11, 5"establishment_date":1, 6"representative":"大倉大臣", 7"business_description":"未来的人工衛星の製造", 8"capital":2000000,"capital_unit":"yen","address":"ほげほげ県", 9"image_url":null, 10"user_attributes":{ 11 "email":"hogehuga@example.com", 12 "last_name":"太郎", 13 "first_name":"田中", 14 "tel":null}}

#ブラウザで確認したこと
console.log(this)
console.log(this.su_company)
console.log(this.capital_unit)
を試した結果がこちらの画像です。
まずは(this)
![イメージ説明]
VueComponent配下、そしてdataの中にsu_companyのオブジェクトががありました。

次に残りの二つ
イメージ説明
capital_unitはとれているものの、su_companyはとれていません。

そしてvue-devtoolsをみると、、、
イメージ説明

とれているのです。。

どうにかthis.su_companyでオブジェクトの情報を取得したいと思っています。
宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

.then(response => (this.su_company = response.data));の書き方に気になる点があります。
mountedとfetchSuCompanyメソッドを下記のように書き換えて動作確認をお願いします。

mounted() { console.log('call mounted') this.fetchSuCompany() console.log(this.su_company) console.log(this.capital_units) }, methods: { fetchSuCompany() { console.log('call fetchSuCompany') this.$auth.api .get(`su_companies/${this.$route.params.id}/edit`) .then((response) => { console.log('response', response) this.su_company = response.data.su_company }) .catch((error) => { console.log('error', error) }) } }

投稿2019/12/08 06:05

編集2019/12/08 08:21
rubytomato

総合スコア1752

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

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

tenten11055

2019/12/08 11:56

ご回答ありがとうございます。 試した結果ですが、console.log(response)の中身にsu_companyの情報はあったものの、 console.log(this.su_company)はundefindになっており、dev-toolsの方にもありませんでした。 今回この質問をさせていただいたのは、画面遷移時に画面が真っ白になってしまい、 console.log(this.su_company)で結果がとれなかったためこちらが原因だと思ったからです。 しかし別ファイルのソースに余計なアンダーバーが入っており、それを削除した結果思うような動作となりました。 タイトルの方向性とは少し違いますが、一応現時点やりたいことはできたので解決と致します。 console.log(this.su_company)でwebコンソールで表示できないことについては引き続き自分の方で追いたいと思います。 迅速にコメントをくださり、学ぶこともありましたのでベストアンサーにさせていただきます。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問