Nuxt3でGoogle Places API を使用して取得したデータを<template>内で表示させたいです。

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件

自己解決

次の日になると問題なく動きました。ありがとございます。

投稿2023/01/11 08:57

uaaa0348

総合スコア2

onMounted の中だとうまく行かないとかですかね？
setupの中に外部問い合わせを書いた動作例

js
1<script lang="ts">
2export default defineComponent({
3  async setup() {
4    const { data: items } = await useFetch('https://jsonplaceholder.typicode.com/todos/')
5    return {
6      items
7    }
8  },
9})
10</script>
11
12<template>
13  <ul>
14    <li v-for="item in items">
15      {{ item.id }} {{ item.title }}
16    </li>
17  </ul>
18</template>

投稿2023/01/01 06:09

yuma.inaura

総合スコア1427

data 定義がないからとかですかね？
こんな風にdataを作っておいて $this.result_shop = xxx; みたいに変数代入できませんか

js
1<template>
2  <ul>
3    <li v-for="item in items">
4      {{ item.id }} {{ item.title }}
5    </li>
6  </ul>
7</template>
8
9<script>
10
11export default {
12  data: () => {
13    return {
14      items: [],
15    };
16  },
17  async mounted() {
18    const data = await fetch('https://jsonplaceholder.typicode.com/todos/')
19    const json = await data.json()
20    this.items = json
21  }
22};
23</script>