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

Question

前提

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
}

Comments

[yuma.inaura]

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

[sasupsasup]

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

[yuma.inaura]

そもそもですがreloadって選択状態とかは保持されるんでしたっけ

そのままコードを試そうとしましたがavailableCitiesがないので試せませんでした

[yuma.inaura]

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

[sasupsasup]

yuma.inaura様、引き続きコメントいただき感謝いたします。
availableCitiesのコードを追加いたしました。

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

Answer 1

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

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

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

<template>
  <div class="main">
    <h1>Todo</h1>
    <div>
      <input v-model="text" list="item" @change="selectTodo(text)" />
      <datalist id="item">
        <div v-for="todo in todoList" :key="todo.value">
          <option :value="todo.value">{{ todo.name }}</option>
        </div>

      </datalist>
    </div>
    <h2>Todo</h2>
    {{ todoItem.title }}
  </div>
</template>
<script>

export default {
  data() {
    return {
      todoList: [{ name: "TODO1", value: 1 }, { name: "TODO2", value: 2 }, { name: "TODO3", value: 3 }],
      todoItem: {}
    }
  },

  methods: {
    async selectTodo(selectedTodo) {
      console.log(selectedTodo);
      const data = await fetch(`https://jsonplaceholder.typicode.com/todos/${selectedTodo}`)
      const json = await data.json()
      this.todoItem = json
    },
  },
}
</script>

Comments

[sasupsasup]

ご親切にコードの解説をいただき本当にありがとうございました。
クエリに設定することに固執してしまい、単純なロジックに気付きませんでした。

無事思い通りの実装を行うことができましたので、ベストアンサーとさせていただきます。
この度は本当にありがとうございました！