前提
nuxt2の勉強の一環で、openweatherAPIを利用して簡単な天気予報サイトを作成しています。
ドロップダウンで選択した都道府県都市の名前をクエリに設定し
クエリが変わるとwatchメソッドが動いて再描写するように設定しましたが
再描写されても、変更前のクエリの都市でデータを取得してしまいます。
■流れ■
①ドロップダウンで都道府県を選択するとselectCityメソッドが動く
- クエリに「ドロップダウンで選択された都市名」が設定される
- data内のqueryCityに新しいクエリが設定される
selectCity(selectedCity) { this.$router.push({ query: { city: 選択された都市の名前 } }) this.queryCity = this.$route.query.City }
②queryCityの値が変更されたことをwatchメソッドで感知し、ページのリロードを行う
data() { return { queryCity: '', } }, watch: { queryCity() { location.reload() }, },
上記手順を踏むと、意図と反して「変更前のクエリの都市」でデータフェッチが行われてしまいます。
実現したいこと
- リロードされると、新しい都市名でfetchされ再描写されるようにしたい
コード
<template> <div class="main"> <h1>{{ weatherController(weatherInfoList).selectedCityName }}</h1> <div> <input v-model="text" list="item" placeholder="例:東京都/新宿区" @change="selectCity(text)" /> <datalist id="item"> <div v-for="(cityName, key) in cityNamelist" :key="key"> <option>{{ cityName }}</option> </div> </datalist> </div> <table> <tr> <th>WEATHER</th> <th>TEMP</th> </tr> <tr> <td><img :src="weatherController(weatherInfoList).iconImage" /></td> <td>{{ weatherController(weatherInfoList).temp }}℃</td> </tr> </table> </div> </template> <script> ///availableCitiesにて都道府県名一覧の配列を作成 import { availableCities } from '@/utiles/availableCities' export default { data() { return { weatherInfoList: [], city: this.$route.query.city, cityNamelist: Object.entries(availableCities()).map((city) => { return city[1].name }), queryCity: '', } }, async fetch() { const APIKEY = process.env.OPEN_WEATHER_API_KEY ///クエリが設定されていない時は新宿の天気を取得 if (this.city === undefined) { const res = await fetch( `https://api.openweathermap.org/data/2.5/weather?q=shinjuku&units=metric&appid=${APIKEY}` ) .then((response) => response.json()) .then((data) => data) this.weatherInfoList = res } else { const res = await fetch( `https://api.openweathermap.org/data/2.5/weather?q=${this.city}&units=metric&appid=${APIKEY}` ) .then((response) => response.json()) .then((data) => data) this.weatherInfoList = res } }, watch: { queryCity() { location.reload() }, }, methods: { ///取得した天気の全情報を、必要なものだけにする weatherController(weatherInfoList) { const weatherInfo = { name: weatherInfoList.name, icon: weatherInfoList.weather[0]?.icon, temp: Math.round(weatherInfoList.main?.temp), } return { selectedCityName: availableCities()[weatherInfo.name.toLowerCase()].name, iconImage: `http://openweathermap.org/img/wn/${weatherInfo.icon}@2x.png`, temp: weatherInfo.temp, } }, selectCity(selectedCity) { const includeList = Object.keys(availableCities()).filter( (city) => availableCities()[city].name === selectedCity ) if (includeList.length === 0) { alert('正しい都道府県を入力してください') } else { this.$router.push({ query: { city: includeList } }) this.queryCity = this.$route.query.City } }, }, } </script>
availableCities()
type AvailableCitiesOut = { [index: string]: { name: string lat: string lon: string } } ///東名阪の都道府県リスト export const availableCities = (): AvailableCitiesOut => { const cities = { shinjuku: { name: '東京都/新宿区', lat: '35.689753', lon: '139.691731', }, nagoya: { name: '愛知県/名古屋市', lat: '35.180344', lon: '136.906632', }, osaka: { name: '大阪府/大阪市', lat: '34.686555', lon: '135.519474', }, } return cities }
一部ではなく再現できるコードを載せておきませんか?
失礼いたしました。全コード追加いたしました。
そもそもですがreloadって選択状態とかは保持されるんでしたっけ
そのままコードを試そうとしましたがavailableCitiesがないので試せませんでした
画像と温度を表示してるだけだと思うので reloadなしで実装できたりしませんでしょうか
yuma.inaura様、引き続きコメントいただき感謝いたします。
availableCitiesのコードを追加いたしました。
変更されたクエリの都市名で再度fetchが行われるようにするには、reloadを行えば新しいクエリ都市名でfetchが行われるかと思い実装しましたが、変更前クエリの情報でfetchが行われてしまいます。
当方プログラミング初心者のため、知識が浅く解決策が見出せません。
お手数をおかけいたしますが、ご指導の程よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー