반도젠
177
2019-10-04 10:52:51
1
224

vue axios 통신 후 push 이벤트



mbv vue 에서 calendar 를 구입해서 일정 작업을 하고 있는데 처음 events 에 데이터가 잘 들어갔고 created 에서도 events.push 를 하면 정상적으로 적용이 되었습니다. 그런데 axios 로 데이터를 가지고와 뿌려주고 하면 화면에서는 아무런 반응이 없어서요 그런데 콘솔에 events 를 찍어보면 데이터는 들어가져 있는걸로 나옵니다. 

axios 통신 후 어떻게 하면 events.push 를 정상적으로 할 수 있는지 알고싶습니다.




<template>
  <div class="calendar-box">
    <mdb-calendar 
    :events="events" 
    :shortDayNames="['' , '' , '' , '' , '' , '' , '']"
    :monthNames="['1월' , '2월' , '3월' , '4월' , '5월' , '6월' , '7월' , '8월' , '9월' , '10월' , '11월' , '12월']"
    
    />
  </div>
</template>

<script>




// import { mdbCalendar } from 'mdb-calendar'
import { scheduleList } from '@/api/app.js'
import { mdbCalendar } from '@/components/mdb/mdbCalendar.vue'

export default {
  data() {
    return {
      token : localStorage.getItem('accessToken'),
      events : [
        {
          title: '훈련',
          start: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7),
          end: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 8, 23, 59, 59),
          color: 'warning',
          text : 'aaaaa'
        },
      ],
      nowYear : new Date().getFullYear(),
      nowMonth : new Date().getMonth()+1,
    }
  },
  components: {
    mdbCalendar
  },
  computed : {
    
    
  },
  watch : {
    events : function(value) {
      
    }
  },
  created() {
    
    this.events.push(
      {
        title: '경기',
        start: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7),
        end: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 8, 23, 59, 59),
        color: 'primary',
        text : 'aaaaa'
      },
    )

    
    const lastDay = ( new Datethis.nowYear, this.nowMonth, 0) ).getDate();
    if (this.nowMonth < 10){
      this.nowMonth = "0"+this.nowMonth;
    }

    const startDate = `${this.nowYear}-${this.nowMonth}-01`
    const endDate  = `${this.nowYear}-${this.nowMonth}-${lastDay}`
    console.log(startDate , endDate)

    scheduleList(startDate , endDate , this.token)
      .then(res => {
        console.log('res =' , res );
        res.data.scheduleList.forEach(i) => {
          this.events.push(
            { 
              title : i.title , 
              start : new Date(i.startDate) , 
              end : new Date(i.endDate)  , 
              text : i.detail  
            }
          )
        })
        // console.log(this.events)

      })
      .catch(err => {
        console.log('err =' , err) 
      })
  },
  mounted() {
    
  },
  methods : {

  }
}


</script>







0
0
  • 답변 1

  • 디늑
    593
    2019-10-04 12:31:44 작성 2019-10-04 12:34:32 수정됨

    코드만 봐서는 문제없고 동작하는게 맞는데

    vue가 감지를 못하고있나보네요


    this.events.push 완료후 반응을 강제로 넣기위해 배열주소를 바꿔보세요

    this.events = [...this.events] // 별로 좋은 방법은 아니에요 shallow copy가 일어납니다


    vue는 Array 반응을 위해 밑에 메소드를 감시하고 있어 동작하는게 맞아요

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()

    https://vuejs.org/v2/guide/list.html#Mutation-Methods

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.