[vue] v-for 안에서 값이 바뀌지 않는 버그 || v-model cannot be used on v-for or v-slot scope variables because they are not writable.

v-model cannot be used on v-for or v-slot scope variables because they are not writable.

업무도중 위와 같은 에러를 만났다.

사실 위 문장을 바로 마주친건 아니였고...

회사에서 quasar라는 ui 프레임워크를 사용하는데 (quasar는 vue 기반으로 사용)

https://quasar.dev/

Quasar Framework - Build high-performance VueJS user interfaces in record time

 

자꾸 v-for안에서 값을 수정할때 바로 값이 바뀌는게 아닌

1. v-for안에서 값을 입력한다.

2. 근데 바로 적용이안됨

3. v-for바깥의 element input등을 클릭 후 값을 수정해야 그제서야 v-for안의 값도 입력한대로 수정이 됨

위의 순서대로 버그가 일어남

 

왜 그런가 선임분께 여쭤보니 원래 vue에서 배열값으로 v-for을 쓴후,

반복변수(밑 스크린샷에선 testValue)를 그대로 v-model로 사용해버리면 에러가 난다고 하네요

더 쉽게 말하면반복변수 자체를 업데이트 할 수 없음!

(친절한건지 불친절한건지 quasar에서는 위의 경우 경고문만 뜨는데 제가 무시해버림 / 실행은 됨)

 

바로 vue3 에서 테스트해봤습니다.

v-model cannot be used on v-for or v-slot scope variables because they are not writable.

이제야 에러문을 발견...

v-for의 지역변수(배열변수를 말하는 거겠죠?) v-model로 사용할 수 없다네요.

 

아마 vue에서는 array안의 값을 바꾼다고 바로 리바인딩 되는게 아니라 저같이

"input에 값을 입력했는데 왜 바로 안바뀌냐?" 하는 사람이 있을까봐 막아놓았는것 같네요

quasar 환경이라 저는 실행자첸 잘됐던거고 ㅎㅎ

 

그래서 해결법은

이렇게 반복변수자체를 업데이트하지않게 오브젝트로 한번 더 감싸면 일단 해결은 됩니다.

올바른 해결법인진 모르겠지만 일단 에러나 경고문은 나오지 않네요.