【Vue/Nuxt】-コンポーネント編- 天気APIを使って一通りフロントを実装してみる

前提条件

【Vue/Nuxt】-Vuex編- 天気APIを使って一通りフロントを実装してみる
上記記事にて天気APIのデータを取得済み

見える側を作っていく！

前回の続き

ForcastCard というコンポーネントを作ってみました。
イメージはこんな感じ。

index.vue

<template>
  <section class="weather">
    <h1 class="weather__title">{{ weather.title }}</h1>
    <ForcastCard
      v-for="(forecast, i) in weather.forecasts"
      :forecast="forecast"
      :key="`weather__forcasts-key-${i}`"/>
  </section>
</template>

<script>
import ForcastCard from '~/components/Pages/ForcastCard';
import { mapFields } from 'vuex-map-fields';

export default {
  components: {
    ForcastCard
  },
  computed: {
    ...mapFields('weatherApp', ['weather'])
  },
  async asyncData({ store, params }) {
    await store.dispatch('weatherApp/fetchWeather');
  }
};
</script>

< ForcastCard :forecast="forecast" のところでmapFieldsした
weather.forecastsの配列をv-forして一つずつpropsとして渡してあげます。

ForcastCardコンポーネントを作る

index.vue

<template>
  <div class="forcast-list">
    <h2 class="forcast-list__title">{{ forecast.dateLabel }}</h2>
    <dl>
      <dt class="forcast-list__telop">{{ forecast.telop }}</dt>
      <dt>
        <img
          v-show="forecast.image.url"
          :src="forecast.image.url"
          class="forcast-list__image"
          alt="forcast.image.title">
      </dt>
    </dl>
  </div>
</template>

<script>
export default {
  props: {
    forecast: {
      type: Object,
      required: true
    }
  }
};
</script>

親から受け取ったprops forecast を使って画面を構成していきます！

ここまでの記述で画面は完成！
完成画像では、少しcss書いたので横並びになっていたりします。

次の記事ではコンポーネントのテストを書いていく！
【Vue/Nuxt】-テスト編（コンポーネント）- 天気APIを使って一通りフロントを実装してみる