[Vue.js] v-for를 이용해 테이블 만들기

필자의 경우 Axios를 이용해 서버에서 데이터를 변수에 넣고

그 데이터를 테이블로 보여주는 경우였다.

<table class="table table-striped">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">이름</th>
			<th scope="col">직책</th>
			<th scope="col">팀</th>
			<th scope="col" v-if="sheetStatus != 'WAIT'">응답상태</th>
			<th v-for="(question, index) in sheetQuestions" :key="index" scope="col">{{ question }}</th>
			<th scope="col" v-if="sheetStatus != 'WAIT'">응답날짜</th>
			<th scope="col" v-if="sheetStatus != 'WAIT'">수정날짜</th>
			<th scope="col" v-if="sheetStatus == 'PROCEEDING'">응답 수정</th>
			<th scope="col" v-if="sheetStatus == 'PROCEEDING'">메일 전송</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(line, index) in responseData" :key="index">
			<th scope="row">{{ index + 1 }}</th>
			<td>{{ line.name }}</td>
			<td>{{ line.position }}</td>
			<td>{{ line.teamName }}</td>
			<td v-if="sheetStatus != 'WAIT'">
				<span v-if="line.requestStatus == 'YES'" style=""><span class="dot dot-yes"></span></span>
				<span v-else>
					<div v-if="sheetStatus == 'PROCEEDING'" class="spinner-border spinner-border-sm text-danger" role="status">
						<span class="sr-only">Loading...</span>
					</div>
					<div v-else>
						<span class="dot dot-no"></span>
					</div>
				</span>
			</td>
			<td v-for="(text, index2) in line.response" :key="index2">{{ text }}</td>
			<td v-if="sheetStatus != 'WAIT'">{{ line.responseDate != null ? line.responseDate.split('T').join('  ') : '' }}</td>
			<td v-if="sheetStatus != 'WAIT'">{{ line.modifiedDate != null ? line.modifiedDate.split('T').join('  ') : '' }}</td>
			<td v-if="sheetStatus == 'PROCEEDING'"><Button class="btn btn-info">Edit</Button></td>
			<td v-if="sheetStatus == 'PROCEEDING'">
				<Button v-if="line.requestStatus == 'YES'" class="btn btn-warning">수정 요청</Button>
				<Button v-if="line.requestStatus == 'NO'" class="btn btn-warning">재전송</Button>
			</td>
		</tr>
	</tbody>
</table>