nuxt2にてクエリを変更しても、うまく再描写されない。

前提

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
}

yuma.inaura

2023/01/20 11:19

一部ではなく再現できるコードを載せておきませんか？

sasupsasup

2023/01/20 23:13

失礼いたしました。全コード追加いたしました。

yuma.inaura

2023/01/21 02:53

そもそもですがreloadって選択状態とかは保持されるんでしたっけそのままコードを試そうとしましたがavailableCitiesがないので試せませんでした

yuma.inaura

2023/01/21 03:28

画像と温度を表示してるだけだと思うので reloadなしで実装できたりしませんでしょうか

sasupsasup

2023/01/21 08:25 編集

yuma.inaura様、引き続きコメントいただき感謝いたします。 availableCitiesのコードを追加いたしました。変更されたクエリの都市名で再度fetchが行われるようにするには、reloadを行えば新しいクエリ都市名でfetchが行われるかと思い実装しましたが、変更前クエリの情報でfetchが行われてしまいます。当方プログラミング初心者のため、知識が浅く解決策が見出せません。お手数をおかけいたしますが、ご指導の程よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

change をフックとしてfetchする
fetchしたデータをdata に再代入する

これで reload せずとも再描画されませんか

都道府県ではないですがこんな感じで

js
1<template>
2  <div class="main">
3    <h1>Todo</h1>
4    <div>
5      <input v-model="text" list="item" @change="selectTodo(text)" />
6      <datalist id="item">
7        <div v-for="todo in todoList" :key="todo.value">
8          <option :value="todo.value">{{ todo.name }}</option>
9        </div>
10
11      </datalist>
12    </div>
13    <h2>Todo</h2>
14    {{ todoItem.title }}
15  </div>
16</template>
17<script>
18
19export default {
20  data() {
21    return {
22      todoList: [{ name: "TODO1", value: 1 }, { name: "TODO2", value: 2 }, { name: "TODO3", value: 3 }],
23      todoItem: {}
24    }
25  },
26
27  methods: {
28    async selectTodo(selectedTodo) {
29      console.log(selectedTodo);
30      const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${selectedTodo}`)
31      const json = await data.json()
32      this.todoItem = json
33    },
34  },
35}
36</script>