vue-프로젝트 chart.js(4일차)

1. 상위컴포넌트에서 함수를 통해 변경된 변수값은 computed로 하위컴포넌트에 값을 전달할 수 있다.
2. chart.js를 사용할때 하위컴포넌트에서는 <template>을 사용하면 오류가 난다 <script>만
3. props로 여러개의 데이터를 넘길때는 문자타입을 정해줘야한다.

// weather.vue

<template>
  <div class="all">

    <div>
      <dt class="detail">
        <dd class="weather" v-for="(weather, index) in weather">
          {{weather}}
        </dd>
      </dt>
    </div>

    <weather-chart v-bind:text="time" v-bind:number="temperature"></weather-chart>

  </div>
</template>

<script>
import {Line} from 'vue-chartjs'
import weatherChart from './weatherChart'

var axios = require('axios')
var cheerio = require('cheerio');

export default {
  extends: Line,
  components:{
    weatherChart
  },
  data() {
    return {
      number : '',
      temperature : [],
      weather: [],
      time : [],
    }
  },
  computed: {
    getData: function(){
      axios.get('https://search.naver.com/search.naver?sm=top_hty&fbm=1&ie=utf8&query=%EB%82%A0%EC%94%A8')
      .then(res => {
        var $ = cheerio.load(res.data)
        var number = $("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li").length
        this.number = number


        for(var i=1; i<=number; i++){
          this.temperature.push($("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li:nth-child("+i+") > dl > dd.weather_item._dotWrapper > span:nth-child(1)").text())
        }
        for(var i=1; i<=number; i++){
          this.weather.push($("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li:nth-child("+i+") > dl > dd.item_condition > span").text())
        }
        for(var i=1; i<=number; i++){
          this.time.push($("#main_pack > div.sc.cs_weather._weather > div:nth-child(2) > div.weather_box > div.weather_area._mainArea > div.today_area._mainTabContent > div.table_info.bytime._todayWeatherByTime > div.info_list.weather_condition._tabContent > ul > li:nth-child("+i+") > dl > dd.item_time > span").text())
        }
      })
    }
  },
  mounted(){
    this.getData
  }
}
</script>

<style scoped>
  .detail{
    display: flex;
    flex-direction: row;
  }
  .temperature, .weather, .time{
    width: 12.5%;
    padding-top: 20px;
  }
</style>

// weatherChart.vue

<script>
import {Line} from 'vue-chartjs'

export default {
  extends: Line,
  props:{
    'text':Array,
    'number':Array
  },
  data() {
    return {
      temperature: [],
      time: [],
      numbers: '',

      datacollection: {
        labels: this.text,
        datasets: [
          {
            label: '온도',
            data: this.number
          }
        ]
      },
      options: {
        legend:{
          display:true
        }
      }
    }
  },
  mounted(){
    this.renderChart(this.datacollection, this.options)
  }
}
</script>

<style scoped>
</style>