[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%3Dveganee&w=2048&q=75)
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가 움직이고 있었던 것이 원인이었다. focused를 주어 크기를 고정하니 에러가 사라졌다.
<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>
Share article