[JS: Vue] v-for & v-bind

Vue.js

- v-for & v-bind -

 

---

KeyPoint
 - v-for문의 index값을 이용하여 v-bind로 id값에 Binding
 - v-for문에서 select를 여러 번 출력할 때 id값 중복 피하기

---

v-for를 이용하여 리스트를 출력하고, 각 리스트별 select box를 출력해 해당 select의 option value값을 가져오고 싶을 때 select box의 ID값이 같아 원하는 value값을 가져오지 못 할 때가 있다.

 

예시 코드

<tr v-if="allMemList.length != 0" v-for="list in allMemList">
    <td>{{ list.userNm }}</td>
    <td>{{ list.teamNm }} </td>
    <td>{{ list.gradeKor }} </td>
    <td>
        <select id="selectedAuth">
        <option value="All">All</option>
        <option value="ReadOnly">ReadOnly</option>
        </select>
    </td>
    <td><button @click="authRegist(list)">등록</button></td>
</tr>

<tr> 태그에 v-for를 이용하여 작성하면 allMemList[index] (0 <= index < allMemList.length)의 값들을 출력할 수 있다.

• allMemList = [ ] : Back단에서 받아온 데이터를 담은 배열
• list : allMemList[idx]의 값
• list.xxx : allMemList[idx]의 xxx 항목 값
• cf) @click="함수명(list)" : 클릭 시 해당 라인(list)값을 parameter로 하는 함수 호출

예시 화면

결과 화면

 

권한열에 list와 관련없는 select box값을 넣어두었다.

$("#id값").val()을 이용하여 해당 라인의 select value를 얻어오고 싶었는데, 맨 윗 행을 제외하고는 제대로 받아오지 못 했다.

원인은 모든 행의 select box의 id값이 동일하기 때문에, 맨 위의 select box 값만 가져오는 것이었다.

 

해결 방법

해결 방법은 id값을 다르게 해주면 된다.

하지만 반복되는 문장에서 id값을 어떻게 다르게 줄 것이며, 그 값들을 매번 어떻게 불러올 것인가?

이를 위해 사용할 수 있는 것이 v-for의 index 값을 id에 넣어주는 :id (id bind) 이다.

 

>> 수정된 코드

<tr v-if="allMemList.length != 0" v-for="(list, idx) in allMemList">
    <td>{{ list.userNm }}</td>
    <td>{{ list.teamNm }} </td>
    <td>{{ list.gradeKor }} </td>
    <td>
        <select :id="'selectedAuth_'+idx">
            <option value="All">All</option>
            <option value="ReadOnly">ReadOnly</option>
    	</select>
    </td>
<td><button @click="authRegist(list, idx)">등록</button></td>
</tr>

• v-for="(list, idx) in allMemList" : allMemList[idx] 값과 idx 값을 이용
• :id = " 'selectedAuth_' + idx" : id값에 idx를 바인딩
• authRegist(list, idx) 함수에서 $("#selectedAuth_"+idx).val()로 값 가져오기

>> 수정된 화면에서 id값 확인

id에 idx값이 정상적으로 bind 됨

 

---

테스트 Script Code

authRegist(list, idx) { // 권한 등록
	
    // idx를 바인딩한 select box의 value 가져오기
    var selectedAuth = $('#selectedAuth_'+idx).val();

    if(confirm(list.userNm + list.gradeKor + '의 권한을 ' + selectedAuth + '로 등록하시겠습니까?')){
        var self = this;
        
        // json형식으로 데이터 변환
        var data = {
            'projectSn' : self.projectSn,
            'teamSn' : list.teamSn,
            'userSn' : list.userSn,
            'gradeSn' : list.gradeSn,
            'authority' : selectedAuth
    	}
        
        // data를 json으로 변환(추후 서버통신 시 필요)
    	var jsonData = JSON.stringify(data);

		// console에 찍어보기
    	console.log(jsonData);
	}

}

 

결과 화면

alert

console

 

---

 

 

 

 

 

End.

heisely's 괴발개발 개발일지