Nuxt3でGoogle Places APIを用いて飲食店の名前を取得して<template>内に表示させたいです。下記のresult_shop.value = resultの部分ではresult_shopにデータは取得できているのですが、最後のreturnで返している変数であるresult_shopが「not defined」になり、template内のv-forのresult_shopも空なので表示されません。
このif文の中のresult_shopにアクセスしてreturnでtemplateにデータを渡して表示させる方法をご教授いただければ幸いです。
ソースコード
<template> <div v-for="shop in result_shop"> <div>{{ shop.name }}</div> </div> </template> <script> import color from "@/assets/json/color.json"; import city from "@/assets/json/pref_city.json"; import { Loader } from "@googlemaps/js-api-loader"; import { onMounted, ref } from "vue"; export default { setup() { let result_shop = ref([]); const loader = new Loader({ apiKey: "xxxxxxxxxxxxxxxx", version: "weekly", libraries: ["drawing", "geometry", "places", "visualization"], }); onMounted(() => { loader.load().then((google) => { const geocoder = new google.maps.Geocoder(); let lat = ""; let lng = ""; geocoder.geocode( { //クエリパラメータを使用 address: "東京都 港区" }, (result, status) => { if (status == "OK") { //取得した緯度・経度を使って周辺検索する lat = result[0].geometry.location.lat(); lng = result[0].geometry.location.lng(); } } ); const lat_lng = new google.maps.LatLng( parseFloat(lat), parseFloat(lng) ); const map = new google.maps.Map(document.createElement("div")); const service = new google.maps.places.PlacesService(map); service.textSearch( { location: lat_lng, radius: 2000, query: "飲食店 東京都 港区" , language: "ja", }, (result, status) => { if (status == "OK") { result_shop.value = result; } } ); }); }); return { result_shop }; }, }; </script>

回答3件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。