[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기
Feb 21, 2024
![[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기](https://image.inblog.dev?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D%255Bvue3%255D%2520%25E2%2580%2598ResizeObserver%2520loop%2520completed%2520with%2520undelivered%2520notifications.%25E2%2580%2599%2520%25EC%2597%2590%25EB%259F%25AC%2520%25ED%2595%25B4%25EA%25B2%25B0%25ED%2595%2598%25EA%25B8%25B0%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3Dyoung9xo&w=2048&q=75){kind=logo}
Contents
Solution [vue3] 배달 반경범위 v-autocomplete 클릭 시 ‘ResizeObserver loop completed with undelivered notifications.’ 에러가 발생했다. 다른 v-autocomplete 클릭 시에는 에러가 안나고 간헐적으로 배달 반경범위 뒤 input은 에러가 안날 때도 있었다.
<v-autocomplete
focused
item-title="text"
item-value="value"
v-model="kilometerProductComputed"
:items="maxKilometerProductOptionList"
variant="outlined"
hide-details="auto"
:filled="kilometerProductAllYnComputed"
:disabled="kilometerProductAllYnComputed"
:error="isNotValidKilometerProductError"
@keyup="$event.stopPropagation()"
@blur="handleBlurKilometerProductTypeField(
formData.hubConfiguration.kilometerProduct)"
></v-autocomplete>
Solution
ResizeObserver 의 설명을 보고 감을 잡았다. 이 인터페이스는 Element의 내용 또는 테두리 상자 또는 SVGE 요소의 테두리 상자의 치수 변경을 보고한다.
클릭할 때마다 v-autocomplete의 width가 움직이고 있었던 것이 원인이었다.
focus 시 v-autocomplete--active-menu 라는 클래스가 추가되면서 width가 변경되고 있다.
v-input__control의 width를 고정하여 해결하였다.
<style lang="scss" scoped>
:deep() {
.input-wrapper {
.v-autocomplete {
.v-input__control {
width: 296px;
}
}
}
}
</style><style lang="scss" scoped>:deep() { .input-wrapper { .v-autocomplete { .v-input__control { width: 296px; } } }}</style>
Share article
