‘v-model’ directives cannot update the iteration variable ‘…’ itself.

React.js 에서는 map, forEach같은 함수를 이용해 여러 요소를 같은 컴포넌트로 편하게 렌더링할 수 있고, Vue.js 프레임워크에서는 v-for directive를 이용해 여러 요소를 같은 컴포넌트로 쉽게 렌더링할 수 있다.

또한 Vue.js에서 단순히 데이터를 보여주기 위해서는 v-bind directive를 이용하거나 템플릿 문법을 사용해서 데이터를 단방향으로 바인딩하는 방법을 사용할 수 있다.

하지만 간혹 상위 컴포넌트에서 하위 컴포넌트로 전달한 Props를 해당 컴포넌트 내부에서 조작할 때가 보다 편리한 경우도 존재한다. 이를 위해 v-model directive를 이용해 양방향으로 데이터를 바인딩하곤 하는데, v-for directive를 이용하고 있는 경우, 위와 같은 Lint 에러를 발생시키는 경우가 있다.

Subscribe

에러 메시지에 따르면, v-model directive는 이터레이션 변수 자체를 업데이트할 수 없다고 한다.

이러한 사유의 원인을 함수와 매개변수의 관계에서 추측할 수 있었다. 함수 외부의 값은 매개변수로써 함수 내부로 전달된다. 이 매개변수로 전달된 외부의 값은 함수 내부에서 매개변수 조작이라는 행위를 통해 변화를 줄 수 있지만, 내부에서만 변화를 줄 수 있는 것이 아닌 외부에서도 당연히 변화를 줄 수 있다. 따라서 이러한 형태가 된다면 개발자가 의도한 대로 동작하지 않을 확률이 있으며, 이를 추적하기 위한 디버깅도 어려울 것이다.

한 편, 이러한 현상을 회피하기 위해 배열은 index 속성을 이용하여 배열 내 요소로 접근하는 방식으로 Props를 전달하고 하위 컴포넌트에서 값을 조작할 수 있다. 배열이 아닌 객체의 경우에도 객체의 속성을 v-model directive에 바인딩한다면 에러에서 회피할 수 있다.

References

https://vuejs.org/guide/components/slots

원문