Table3.vue

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>