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

<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를 추가해주니 문제가 해결되었다