[Vue] VueCompilerError: Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior 오류

<div class="mt-3">
	변경할 노출 날짜를 선택하세요
	<div>
		<input type="date" v-model="eventStartDate" :value="eventStartDate"> ~ <input type="date" :value="eventEndDate">
	</div>
</div>

날짜 수정 기능이 작동은 하는데 자꾸 서버에서 받아온 원래 값으로 수정됐다.

value로 줬던게 문제여서 v-mode로 바꿔줬는데 두 속성은 충돌한다고 한다.

 

이유는 v-model이 :value(html value 속성)과 똑같이 기본값을 바인딩해주는 동작을 하기 때문.
위와 같은 목적이라면 v-model만을 사용하는것이 맞다.

<div class="mt-3">
	변경할 노출 날짜를 선택하세요
	<div>
		<input type="date" v-model="eventStartDate"> ~ <input type="date" v-model="eventEndDate">
	</div>
</div>

 

+)

체크박스와 라디오 버튼에 대해서는 두 속성을 사용할 수 있다고 한다. (다른 값 사용)

또한 이러한 상황에서는 v-model의 경우 selected 속성과 같이 동작된다고 한다.