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

1. vue-chart.js 사용예제(블로그) : https://chuckolet.tistory.com/8
2. chart.js 공식사이트 : https://www.chartjs.org/docs/latest/general/responsive.html
3. vue-chart.js 공식사이트 : https://vue-chartjs.org/guide/#introduction
4. chart.js 사용예제(블로그) : https://ming9mon.tistory.com/122?category=841705

내일 할 일

차트 크기 조절 하는법 찾기

axios 전달 받은값 화면 갱신 오류

weather 페이지를 클릭하게 되면 getData()함수에서 axios를 사용해

push로 받아온 데이터가 proxy로 하위 컴포넌트에 값이 전달은 되었는데

상위 컴포넌트 화면에 출력이 안됌 

 

// html

    <div class="canvas">
      <weather-chart v-bind:text="time" v-bind:number="temperature" v-if="loaded"></weather-chart>
      // v-if="loaded" 추가
    </div>
    
 // javascript
 
 export default {
  extends: Line,
  components:{
    weatherChart
  },
  data() {
    return {
    
      ... 어제 데이터
      
      loaded: false // 추가
    }
  },

  methods: { // computed에서 methods로 변경
    getData: function(){
		
        ... 어제 코드
        
        this.loaded = true // 추가
       
        ...	어제 코드
        
      })

    }
  },
  mounted(){
    this.getData()
  }
  
  

1. 컴포넌트 속성에 v-if를 추가하여 true일때 화면에 보이게 수정

2. 데이터 loaded를 false로 저장

3. 함수에서 axios로 값을 추가할때 loaded값을 true로 수정