JSFiddle - React, Tailwind, and code Playground

by crucify

HTML

<div id="app">
  <div v-for="(item, index) in paperList" :key="index">
				<div class="QTitle">{{ item.exampleTitle }}<span class="color_red">*</span></div>
				<table class="t_radio">
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
					</tr>
					<tr>
					<form action="">
						<td class="bg_gray">
							<label :for="'radio'+index+1" class="pl10">
								<input :id="'radio' + index+1" :name="'radio' + index" type="radio" class="radio" value="1" v-model="item.selectAnswer" v-on:click="click(item.selectAnswer)">
							</label>
						</td>
						<td class="bg_gray">
							<label :for="'radio'+index+2" class="pl10">
								<input :id="'radio' + index+2" :name="'radio' + index" type="radio" class="radio" value="2" v-model="item.selectAnswer" v-on:click="click(item.selectAnswer)">
							</label>
						</td>
						<td class="bg_gray">
							<label :for="'radio'+index+3" class="pl10">
								<input :id="'radio' + index+3" :name="'radio' + index" type="radio" class="radio" value="3" v-model="item.selectAnswer" v-on:click="click(item.selectAnswer)">
							</label>
						</td>
						<td class="bg_gray">
							<label :for="'radio'+index+4" class="pl10">
								<input :id="'radio' + index+4" :name="'radio' + index" type="radio" class="radio" value="4" v-model="item.selectAnswer" v-on:click="click(item.selectAnswer)">
							</label>
						</td>
						<td class="bg_gray">
							<label :for="'radio'+index+5" class="pl10">
								<input :id="'radio' + index+5" :name="'radio' + index" type="radio" class="radio" value="5" v-model="item.selectAnswer" v-on:click="click(item.selectAnswer)">
							</label>
						</td>
            <td>{{item.selectAnswer}}</td>
					</form>
					</tr>
					<tr>
						<td>{{ item.example1 }}</td>
						<td>{{ item.example2 }}</td>
						<td>{{ item.example3 }}</td>
						<td>{{ item.example4 }}</td>
						<td>{{ item.example5 }}</td>
					</tr>
				</table>
			</div>
</div>

Vue

new Vue({
  el: "#app",
  data: {
    radioCount: 5,
    paperList: [{"searchCondition":"","searchKeyword":"","searchUseYn":"","pageIndex":1,"pageUnit":10,"pageSize":10,"firstIndex":1,"lastIndex":1,"totalCount":0,"checkAdmin":false,"code":"","recordCountPerPage":10,"questionGroupSeq":3,"questionGroupTitle":"영재창의성 판별검사","questionGroupType":"creative","questionNumber":1,"questionSeq":1,"exampleTitle":"민들레(홀씨)와 비슷하게 생긴 물건이나 떠오르는 생각을 말해 보세요.","example1":"낮음","example2":"다소낮음","example3":"양호","example4":"높음","example5":"아주높음","chapter":"1","chapterDetail":null,"example1Point":"2,4,2","example2Point":"4,6,4","example3Point":"6,8,6","example4Point":"8,10,8","example5Point":"13.5,12,10","selectAnswer":"4","childId":null,"submissionDate":null},{"searchCondition":"","searchKeyword":"","searchUseYn":"","pageIndex":1,"pageUnit":10,"pageSize":10,"firstIndex":1,"lastIndex":1,"totalCount":0,"checkAdmin":false,"code":"","recordCountPerPage":10,"questionGroupSeq":3,"questionGroupTitle":"영재창의성 판별검사","questionGroupType":"creative","questionNumber":2,"questionSeq":2,"exampleTitle":"그러면 왜 그런 생각이 들었는지 이유를 말해 보세요.","example1":"낮음","example2":"다소낮음","example3":"양호","example4":"높음","example5":"아주높음","chapter":"1","chapterDetail":null,"example1Point":"1,4,2","example2Point":"3,6,4","example3Point":"5,8,6","example4Point":"7,10,8","example5Point":"9,12,10","selectAnswer":0,"childId":null,"submissionDate":null},{"searchCondition":"","searchKeyword":"","searchUseYn":"","pageIndex":1,"pageUnit":10,"pageSize":10,"firstIndex":1,"lastIndex":1,"totalCount":0,"checkAdmin":false,"code":"","recordCountPerPage":10,"questionGroupSeq":3,"questionGroupTitle":"영재창의성 판별검사","questionGroupType":"creative","questionNumber":1,"questionSeq":3,"exampleTitle":"토끼가 '가바이'라고 말한 동물 친구는 누구입니까? 토끼가 '가바이'가 아니라고 말한...