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

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

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

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

3562閲覧

Vue.jsのスコープについて

daikitakaya

総合スコア229

Vue.js

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/09/05 04:36

###前提・実現したいこと
Vue.jsでユーザーが入力した文字列の地名をを元にgoogle maps apiを叩いて、その地名の緯度経度を求めようとしています。

例) 『秋田県』と入力すると https://maps.google.com/maps/api/geocode/json?address=%E7%A7%8B%E7%94%B0%E7%9C%8C を叩き、jsonデータを取得しています。

###発生している問題・エラーメッセージ
ユーザーが入力し他をデータを元にapiを叩くところまでをできているのですが、dataの更新がうまくできません。
Javascriptに不慣れなためか、関数のスコープ問題だと思っています。

(this.info.locationsでデータを追加しようとしているのですが、該当箇所の外のスコープではthis.infoでアクセスできているため)

Search.vue

1 2<template> 3 <div class="search"> 4 <h1>{{ title }}</h1> 5 <p>緯度経度</p> 6 <input v-model='adress' placeholder='住所検索'> 7 <input type='submit' @click='GetLocations(adress)'> 8 <ul> 9 <li>{{ info }}</li> 10 <li>{{ adress }}</li> 11 </ul> 12 </div> 13</template> 14<script> 15import axios from 'axios' 16export default { 17 name: 'search', 18 data () { 19 return { 20 title: '地名検索', 21 adress: '', 22 info: {} 23 } 24 }, 25 methods: { 26 GetLocations (params) { 27 var url = encodeURI(`https://maps.google.com/maps/api/geocode/json?address=${params}`) 28 axios.get(url).then(function (response) { 29 //このスコープの中でthis.infoにアクセスできない 30 this.info.locations = response.data.results[0].geometry.location 31 }).catch(function (error) { 32 console.log(error) 33 }) 34 } 35 } 36} 37</script> 38<style></style> 39

###試したこと
様々なスコープの箇所でconsole.log()を使って値を確認
###補足情報(言語/FW/ツール等のバージョンなど)
Vue.js 2.X

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

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

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

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

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

guest

回答2

0

動作確認していませんが、こんな感じでしょうか。

js

1 GetLocations (params) { 2 var url = encodeURI(`https://maps.google.com/maps/api/geocode/json?address=${params}`) 3 var self = this; 4 axios.get(url).then(function (response) { 5 //このスコープの中でthis.infoにアクセスできない 6 self.info.locations = response.data.results[0].geometry.location 7 }).catch(function (error) { 8 console.log(error) 9 }) 10 }

投稿2017/09/05 05:20

alg

総合スコア2019

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

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

0

ベストアンサー

本題ではありませんが、Google Maps Geocoding APIはGoogle Mapと併用しなければなりません。こちらの点は問題ないでしょうか。

Google Maps Geocoding API は、Google マップに結果を表示するときにのみ併用されます。Google マップを表示せずに Google Maps Geocoding API のデータを使用することは禁止されています。(Google Maps Geocoding APIのポリシー

投稿2017/09/05 04:44

maisumakun

総合スコア145121

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

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

daikitakaya

2017/09/05 04:51 編集

ありがとうございます。 サービスリリース時にはMapを使う予定です。 該当箇所のthis.info部分にapiからの情報ではなく、 ``this.info.b = 'b'``としてもerrorが出るので、スコープの問題かと思っています
maisumakun

2017/09/05 04:54

そちらですが、コールバックの中ではthisが別なものになっていると思われます。=>を使った形に書き直すか、呼ぶ前にthisを別な名前の変数に入れておいてそちらを参照する、などの対応が必要となります。
daikitakaya

2017/09/05 05:34

ありがとうございます! axiosでgetする前に `` var that = this `` で中身を別変数に入れてみたところ意図した挙動になりました。 本当にありがとうございます。 コールバック関数について、知識が足りないのですが、なぜこのようにthisに違う物が入ってしまうのでしょうか?
maisumakun

2017/09/05 05:38

オブジェクトに属さない関数を呼ぶ場合、普通に呼べばthisはnull(strictモード)あるいはwindow(非strictモード)となります(周囲のthisを引き継ぐことはありません)。 そして、callやapplyを使うことで、thisを呼ぶ側が設定することもできます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問