[Vue]vue/no-side-effects-in-computed-properties

geniusA·2023년 5월 8일

Vue

목록 보기
1/1

예약페이지 시간선택 창을 만들던 도중 만나게 된 오류
vue error

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      times: [
  "09:00","09:30","10:00","10:30","11:00","11:30","12:00","12:30","13:00","13:30",
  "14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30",
  "19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30",
],
      selected: [],
    }
  },
  methods: {
    select(id) {
      if (this.selected.length < 5 && !this.selected.includes(id)) {
        this.selected.push(id)
      } else if (this.selected.includes(id)) {
        this.selected.splice(this.selected.indexOf(id), 1)
      }
      else if (this.selected.length >= 5) {
        alert('5타임까지만 신청할 수 있습니다')
      }
    }
  },
  computed: {
    selectedTime() {
      return this.selected.sort()
    }
  }
}
</script>

검색해보니 computed에서 selected를 그냥 사용한 것이 문제였다
공식 문서에서 확인

computed: {
    selectedTime() {
      return this.selected.slice(0).sort()
    }
  }

computed에 slice를 추가해주니 문제가 해결되었다

0개의 댓글