TIL vue
vue로 일을 하다가 공부하게 된 내용을 정리한다.

vue

input select 박스 text와 vaule 값 둘 다 얻기

input에서 두개의 값을 얻어야 했다. 하지만 v-model로 두가지를 어떻게 가져올수 있을까 고민을 하게 되었다.
결과를 간단하게 말하자면 객체나 배열로 받아오면 된다

select 에서 v-model을 사용하게 되면 option의 value 값을 반영한다.
하지만 만약 text와 value 값이 다르다면 어떻게 값을 얻을수 있을까
예_ value: 은행 코드 text: 은행 명
고객들에게는 은행 코드 대신에 은행명이 보여야 하고
선택된 은행 코드를 전달해서 사용해야 한다.

객체를 활용하여 v-for로 value = 은행 코드 값은 은행 명으로 쭉 뿌려준 상태이다.
은행명과 은행 코드 두가지 값을 다 얻기 위해서 고민을 하였다.

:value 값에 은행 코드를 쭉 뿌려주었는데 해답은 간단하였다.
:value 값에 객체를 뿌려주고 객체의 닷 노테이션을 활용하여 코드, 은행명에 접근하는것

객체명 : list
객체 데이터들은 코드번호 : 000 은행명: 00은행 으로 되어 있다.

<select  v-model="selectedData" >
<option :value="list" v-for="list in bankLists">{{ list.title }}</option>

이렇게 코드를 작성하게 되면
선택한 값들은 selectedData에 담기게 된다
list가 객체이니 selectedData에는 뿌려준 객체에서 선택한 객체의 값만 전달 되게 된다.

list.title = 은행명 , list.code = 은행 코드

선택된 원하는 값들은 닷 노테이션을 활용해서 접근하면 모조리 사용할수 있다.