[Vue.js] for 문구를 사용하여 가져온 객체의 속성을 서브어셈블리에 전달

문제

Vue.js에서 for 문장을 사용하여 그룹을 회전했지만 가져온 대상의 속성을 하위 구성 요소에 어떻게 전달하는지 모르겠습니다

하고 싶은 거 정리.

The Weather Item 구성 요소에 for 문장의 temperature 값을 넣으려면
▶ 부모 구성 요소
TheToday.vue

<template>
  <div class="today">
    <TheTitle label="Today" :is-today="true" :day="displayDay()"></TheTitle>
    <div class="today-weather">
      <template v-for="(temperature, index) in temperature.todayTemperature">
        <TheWeatherItem :key="index"></TheWeatherItem>
      </template>
    </div>
  </div>
</template>

▶ for 글에서 언급한tempereture 내용

▶ 서브어셈블리
TheWeatherItem.vue

<template>
  <div class="weather-item">
    <p class="weather-item__time">Now</p>
    <img src="img/rain.png" alt="" class="weather-item__img" />
    <p class="weather-item__temp">5°</p>
  </div>
</template>
<script>
import { weatherMixin } from "@/mixins/weather-mixin";
export default {
  name: "TheWeatherItem",
  mixins: [weatherMixin]
};
</script>

▶ 현재 화면
일단 원하는 값은 시간과 기온 두 개(아이콘 부분은 나중에 수정)

해보다

하위 구성 요소의props를 추가하면 해결됩니다.
▶ 서브어셈블리 수정
TheWeatherItem.vue

<template>
  <div class="weather-item">
    <p class="weather-item__time">{{ content.time }}</p>
    <img src="img/rain.png" alt="" class="weather-item__img" />
    <p class="weather-item__temp">{{ content.temperature }}</p>
  </div>
</template>

<script>
import { weatherMixin } from "@/mixins/weather-mixin";
export default {
  name: "TheWeatherItem",
  mixins: [weatherMixin],
  //props追加
  props: {
    content: {
      type: Object,
      required: true
    }
  }
};

▶ 부모 구성 요소 수정
TheToday.vue

<template>
  <div class="today">
    <TheTitle label="Today" :is-today="true" :day="displayDay()"></TheTitle>
    <div class="today-weather">
      <template v-for="(temperature, index) in temperature.todayTemperature">
        <!--contentにtemperatureを渡す-->
        <TheWeatherItem :key="index" :content="temperature"></TheWeatherItem>
      </template>
    </div>
  </div>
</template>

결과

받았지만 시간 스탬프나 온도를 반올림하지 않아 수정이 필요해요.

수정하다

필터를 만들고 값을 곱하기

완성🐱