[Vue.js] checkbox, radio, select 값 가져오기 / 기본값 설정

[Vue.js] checkbox, radio, select 값 가져오기 / 기본값 설정

자바스크립트의 경우 클릭한 값을 찾을 때 for, foreach를 사용하여 엘리먼트를 찾아야한다.

Vue는 v-model을 사용하여 클릭 시 data에 바로 값이 바인딩되기 때문에 굉장히 편리하게 찾을 수 있다.

값 할당하기

클릭한 input 엘리먼트의 value가 data()에 선언된 'prodArr'이라는 배열에 삽입된다.

... ...

... data: () => { prodArr: [], // 선택된 input의 value를 담는 배열 }

기본값 설정

v-model을 사용하는 경우 "checked"를 사용할 수 없다.

그래서 기본값을 세팅할 때는 v-model에 연결된 데이터에 input의 value를 미리 넣어두면 체크된 상태가 된다.

◽ radio, select의 경우

음료 커피 주소 티

... data: () => { // 선택된 input의 value를 담는 변수 // 초기화를 'tea'로 설정하였고, value="tea"인 radio가 기본값으로 선택된다. selectedDrink: 'tea', }

'티'가 기본값으로 설정됨

◽ checkbox의 경우

케이크 레드벨벳 케이크 당근 케이크 고구마 케이크

... data: () => { // 선택된 input의 value를 담은 배열 // 체크박스는 다중 값을 선택할 수 있기때문에 배열([]) 형태이다. // value가 "cake_1", "cake_3"인 input이 기본값으로 선택된다. selectedCake: ['cake_1', 'cake_3'], }

'cake_1', 'cake_3'이 기본값으로 설정됨

참고

개인적으로 공부한 내용을 정리하는 블로그로

잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

from http://be-a-weapon.tistory.com/153 by ccl(A) rewrite - 2021-11-17 13:28:21