###前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。