[Vue] 기초 응용 key-value 객체

1) 데이터

export default{
    data(){
        keyValueData:{
            A: valueA
            B: valueB
            C: valueC
        }
    }
}

 

2) select의 option 생성: v-for

<template>
    <select>
        <option v-for="valueD in keyValueData" :key="valueD" :value="valueD">{{ valueD }}</option>
    </select>
</template>

 

① v-for="value in keyValueData"

- keyValueData라는 객체/배열의 각 항목을 순회하면서 반복

- 각 반복에서 현재 항목을 value라는 변수로 참조(for문의 i)

② :key="valueD"

- Vue의 가상 DOM 업데이트를 위한 고유 키 설정

- 각 option 요소를 구별하는 데 사용

- ':'는 v-bind와 같음(단축 문법)

③ :value="valueD"

- option의 value 속성을 valueD 값으로 바인딩

- 실제 select에서 선택했을 때 이 값이 v-model로 바인딩됨

④ {{ valueD }}

- option 태그 사이의 텍스트로 role 값을 표시

- 사용자에게 보여지는 텍스트

 

 

2-1) option의 value를 객체의 key 또는 value로 지정

v-for로 객체를 순회할 때 다음과 같은 문법을 사용할 수 있다.

v-for="(value, key) in object"
v-for="(value, key, index) in object"

<template>
    <select>
        <option v-for="(key, value) in keyValueData" :key="key" :value="key">{{ value }}</option>
    </select>
</template>

 

 

3) key값을 자동으로 value 값으로 변환해서 출력

서버에서 받아 오는 데이터에 key값이 들어있고, 이를 매칭되는 value로 출력함

* 데이터가 페이징을 위해 pagenatedData로 가공되어있는 상황

<tbody>
	<tr v=for"data1 in pagenatedData" :key="data1.username">
    	<td>{{ data1.username }}</td>
        <td>{{ data1.phonenumber }}</td>
        <td>{{ data1.roles.map(role => keyValueData[role] || role).join(', ') }}</td>
    </tr>
<tbody>

 

① v-for="data1 in pagenatedData" :key="data1.username"

- pagenatedData를 data1이라는 변수로 반복

- key는 data1의 username 값

② data1.roles.map(role => keyValueData[role] || role).join(', ')

- data1의 roles를 map을 사용해 반환

ex) roles가 ["A, B"]인 경우
map 매서드는 콜백 함수를 인자로 받아 함수의 반환값으로 새로운 배열을 만듦
* 현재 콜백 함수: role => keyValueData[role] || role
1. role 변수로 keyValueData에서 해당하는 value를 찾아 오고, 값이 없을 경우 role을 그대로 출력
2. 배열 값이 여러 개인 경우 ', ' 문자를 넣어 문자열로 출력
→최종 출력값: valueA, valueB

 

함수를 풀어서 쓴 코드

//<td>{{ data1.roles.map(role => keyValueData[role] || role).join(', ') }}</td>
roles.map(function(role){
    const matchedValue = keyValueData[role] || role
    return matchedValue
}).join(', ')