[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기

Feb 21, 2024
[vue3] ‘ResizeObserver loop completed with undelivered notifications.’ 에러 해결하기
Contents
Solution
  1. [vue3] 허브수정 > 배달 반경범위 v-autocomplete 클릭 시 ‘ResizeObserver loop completed with undelivered notifications.’ 에러가 발생했다.
    1. 다른 v-autocomplete 클릭 시에는 에러가 안나고 간헐적으로 배달 반경범위 뒤 input은 에러가 안날 때도 있었다.
    2. <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>
notion image
notion image
 

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

veganee