Table3.vue_20211217

<template>
    <div>
        <h3>Table 3</h3>
        <table class="bluetop">
            <thead>
                    <tr>
                        <th>no</th>
                        <th>num1</th>
                        <th>num2</th>
                        <th>num3</th>
                        <th>결과</th>
                        <th>버튼</th>
                    </tr>
            </thead>
            <tbody>
                <tr v-for="(tmp, idx) in items" v-bind:key="tmp"> <!-- 몇번째 더하긴지 모르니까 idx넣기 -->
                    <td> {{ tmp.no }} </td>
                    <td> {{ tmp.num1 }} </td>
                    <td> {{ tmp.num2 }} </td>
                    <td> {{ tmp.num3 }} </td>
                    <td> {{ tmp.tot }} </td>
                    <td>
                        <input type="button" value="+" @click="handle1(idx)" />
                        <input type="button" value="-" @click="handle2(idx)" />
                        <input type="button" value="*" @click="handle3(idx)" />
                        <input type="button" value="/" @click="handle4(idx)" />
                    </td>        
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        created(){ // 데이터 created로도 가져올 수 있음
            this.items = [
                {no:1, num1:5, num2:3, num3:7 },
                {no:2, num1:6, num2:5, num3:8 },
                {no:3, num1:9, num2:2, num3:4 },
            ];

            for(let tmp of this.items){ 
                tmp['tot'] = 0; // 표에 없는 데이터 키 임의로 추가 후 위 테이블에 td 추가
            }
        },
        data() {
            return {
                items : [],
            }
        },
        methods: {
            handle1(idx) {
                console.log("Table3.vue => handle1", idx);

                this.items[idx]['tot'] =
                    this.items[idx].num1 +
                    this.items[idx].num2 +
                    this.items[idx].num3;
            },

            handle2(idx) {
                console.log("Table3.vue => handle2", idx);

                this.items[idx]['tot'] =
                    this.items[idx].num1 -
                    this.items[idx].num2 -
                    this.items[idx].num3;
            },

            handle3(idx) {
                console.log("Table3.vue => handle3", idx);

                this.items[idx]['tot'] =
                    this.items[idx].num1 *
                    this.items[idx].num2 *
                    this.items[idx].num3;
            },

            handle4(idx) {
                console.log("Table3.vue => handle4", idx);

                this.items[idx]['tot'] =
                    this.items[idx].num1 /
                    this.items[idx].num2 /
                    this.items[idx].num3;
            },
        },
    }
</script>

<style scoped>

</style>