https://github.com/2taesung/VueBeforeWeek
p 101
5.3.3.5 체크박스(input type=checkbox), 라디오(input type=radio)
체크박스의 경우는 text, select와 다르게 v-model은 내부적으로 체크박스의 checked 속성을 사용합니다.
=> 이 문장이 이해가 가지 않았다.
=> 홍선이한테 물어봄. 한번 해당 코드를 작동해 실행해보니 자동으로 true가 false로 바뀌고 false가 true로 바뀌는 것을 확인할 수 있었다. 이름들이 checked로 통일 되어 있다보니 내부적으로 checked 속성을 사용한다는 부분에서 혼돈이 왔다.
=> 내부적으로는 vue에서 js를 내부에서 구현해주는 것이고 나는 또한 js를 이용해 if 문을 이용해 checked를 구현해 본적이 있었다. 오옷;;
v-model="checked" true-value="yes" false-value="no"
{{ checked }}
data() {
return {
checked: true
}
}=> 해당 코드를 작성 했을때, 내가 전 프로젝트에서 있었던 문제가 발생했다. 그것은 내가 위의 코드를 통해 목표했던 것은 바로 yes와 no만이 페이지에 보여지는 것이였다. 하지만
=> 해당 코드를 페이지에 렌더링 시켜보면 가장 먼저 true가 나오고 그다음 눌렀을때부터 yes와 no가 발생했다.
=> 나는 현재 Vue 렌더링 순서를 지금까지 착각하고 있었던 것이다.
=> 나는 가장 먼저 v-model에 해당하는 코드가 작동하고 연결된 data 그리고 data안에 있는 데이터인 checked의 내용이 결과적으로 출력 된다고 생각했다.
=> 하지만 올바른 순서는 checked의 내용이 출력 그다음 v-mode의 작동이였다.
충격!!!!!!!!!!!!!!!!!!!
지금 당장 전 1battle1 프로젝트를 다시 엎어서 만들고 싶지만 ....
여러 개의 체크박스를 사용할 때는 배열을 이용해서 데이터를 바인딩해서 한 번에 처리할 수 있습니다.
=> 배열만 가능하고 그냥 ""은 또 안됨... 왜그럴까 여러 개의 value 값을 데이터로 넣으려는 경우는
체크박스 에서는 v-model이 체크박스의 value속성이 아닌 checked 속성을 사용하기 때문에 / value 속성에 데이터 바인딩을 하려면 v-model이 아닌 v-bind:value를 사용해야 합니다.
=> v-bind는 어떤 마법을 쓰는게 아니라 data에 있는 값을 거꾸로 가져올 수 있는 느낌..
=> 해당 문장을 적용해야할듯. 근데 책에 예시가 없다..
=> 근데 이러면 []를 없애주기 위해서 for문을 써야하네!
