質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

795閲覧

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

sasupsasup

総合スコア1

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

1クリップ

投稿2023/01/20 09:11

編集2023/01/21 08:18

前提

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 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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が行われてしまいます。 当方プログラミング初心者のため、知識が浅く解決策が見出せません。 お手数をおかけいたしますが、ご指導の程よろしくお願いいたします。
guest

回答1

0

ベストアンサー

  • 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>

投稿2023/01/21 08:52

yuma.inaura

総合スコア1453

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasupsasup

2023/01/23 01:19

ご親切にコードの解説をいただき本当にありがとうございました。 クエリに設定することに固執してしまい、単純なロジックに気付きませんでした。 無事思い通りの実装を行うことができましたので、ベストアンサーとさせていただきます。 この度は本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問