this.items =
[
{no :1, num1:30, num2:3, num3:5 },
{no :2, num1:66, num2:2, num3:3 },
{no :3, num1:56, num2:7, num3:4 },
];
일때
for(let tmp of this.items){
tmp['ans'] = 0;
}
위 문장으로 this.items에 ans 항목을 추가하면
모든 곳에 ans가 들어간다.
즉,
this.items = [
{no :1, num1:30, num2:3, num3:5, ans },
{no :2, num1:66, num2:2, num3:3, ans },
{no :3, num1:56, num2:7, num3:4, ans },
];
가 된다.
때문에 [idx]를 사용한 반복문이라도
table 내에서 ans 값을 표시 할때에는 [idx]를 넣지 않는다.
handlePlus(idx) {
this.items[idx]['ans'] =
// this.items[idx].ans 같음
this.items[idx].num1
+ this.items[idx].num2
+ this.items[idx].num3
},
methods 에서 위와같은 함수를 만들었어도
<td v-text="tmp.no"></td>
<td v-text="tmp.num1"></td>
<td v-text="tmp.num2"></td>
<td v-text="tmp.num3"></td>
<td>{{tmp.ans}}</td>
위와같이 표시 할때에는 key 값으로 작용한다.
전체 코드
<template>
<div class="container">
<table border="1">
<thead>
<tr>
<th>번호</th>
<th>숫자1</th>
<th>숫자2</th>
<th>숫자3</th>
<th>결과</th>
<th>버튼</th>
</tr>
</thead>
<tbody>
<tr v-for="(tmp, idx) in items" v-bind:key="tmp">
<td v-text="tmp.no"></td>
<td v-text="tmp.num1"></td>
<td v-text="tmp.num2"></td>
<td v-text="tmp.num3"></td>
<td>{{tmp.ans}}</td>
<!-- [idx] 안넣음. items에 새로 넣은 ans 항목을 불러오는것이기 떄문 -->
<td>
<input type="button" value="+" @click="handlePlus(idx)" />
<input type="button" value="-" @click="handleSub(idx)" />
<input type="button" value="*" @click="handleMul(idx)" />
<input type="button" value="/" @click="handleDiv(idx)" />
</td>
</tr>
</tbody>
</table>
<hr>
</div>
</template>
<script>
export default {
created() {
this.handleData();
},
data() {
return{
items : [],
}
},
methods:{
handlePlus(idx) {
this.items[idx]['ans'] = // this.items[idx].ans 같음
this.items[idx].num1
+ this.items[idx].num2
+ this.items[idx].num3
},
handleSub(idx) {
this.items[idx].ans =
this.items[idx].num1
- this.items[idx].num2
- this.items[idx].num3
},
handleMul(idx) {
this.items[idx].ans =
this.items[idx].num1
* this.items[idx].num2
* this.items[idx].num3
},
handleDiv(idx) {
this.items[idx].ans =
this.items[idx].num1
/ this.items[idx].num2
/ this.items[idx].num3
},
async handleData(){
//벡엔드로 부터 데이터 받음
this.items = [
{no :1, num1:30, num2:3, num3:5 },
{no :2, num1:66, num2:2, num3:3 },
{no :3, num1:56, num2:7, num3:4 },
];
for(let tmp of this.items){
tmp['ans'] = 0;
}
}
}
}
</script>
<style scoped>
</style>