Table1.vue_20211217

<template>
    <div>
        <h3>주문목록</h3>
        <div>
            <table border="1">
                <thead>
                    <tr>
                        <th>chk</th>
                        <th>ID</th>
                        <th>나이</th>
                        <th>가격</th>
                        <th>수량</th>
                        <th>합계</th>
                    </tr>
                </thead>
                <tbody> <!-- 번호(idx)를 던져줘야함. 체크박스 몇번에 체크됐는지 알아야 해서 -->
                    <tr v-for="(tmp, idx) in items" v-bind:key="tmp">
                        <td><input type="checkbox" v-model="tmp.chk" @change="handleCheck(idx)" /></td>
                        <td> {{ tmp.id }} </td>
                        <td> {{ tmp.age }} </td>
                        <td> {{ tmp.price }} </td>
                        <td> 
                            <select v-model="tmp.cnt1" @change="handleCheck(idx)">
                                <option v-for="tmp1 in tmp.cnt" v-bind:key="tmp1">
                                    {{ tmp1 }}
                                </option>
                            </select>
                        </td>
                        <td> {{ tmp.sum }} </td>
                    </tr>
                    <tr>
                        <td colspan="2">합계</td> <!-- 셀 병합: colspan="n" -->
                        <td> {{ sumAge }} </td>
                        <td> {{ sumPrice }} </td>
                        <td></td>
                        <td> {{ sumTotal }} </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        created() {
            this.handleData(); // 데이터 호출
        },
        mounted() {

        },

        // 미리 계산 (생명 주기 + 메소드)
        computed: {
            sumAge(){
                let sum = 0;
                for(let tmp of this.items) {
                    sum += tmp.age;
                }
                return sum;
            },
            sumPrice(){
                let sum = 0;
                for(let tmp of this.items) {
                    sum += tmp.price;
                }
                return sum;
            },

            sumTotal(){
                let sum = 0;
                for(let tmp of this.items) {
                    sum += tmp.sum;
                }
                return sum;
            },
        },

        // 상태변수
        data() {
            return {
                items : [],
            }
        },

        methods: {
            handleCheck(idx) {
                console.log('Table1.vue => handleCheck', idx); // 체크 했을 때 반응하는지
                if( this.items[idx].chk === true) {
                    this.items[idx].sum = 
                        this.items[idx].price * this.items[idx].cnt1;
                }
                else {
                    this.items[idx].sum = 0; 

                }
            },


            async handleData() {
                // 백엔드로부터 데이터를 받았다고 가정
                this.items = [
                    { id:'a1', age:10, price:100, cnt:1 },
                    { id:'a2', age:20, price:200, cnt:2 },
                    { id:'a3', age:30, price:300, cnt:3 },
                    { id:'a4', age:40, price:400, cnt:4 },
                    { id:'a5', age:50, price:500, cnt:5 },
                ];

                // for 구문
                for(let i=0; i<this.items.length; i++) { // = 0, 1, 2, 3, 4
                    this.items[i]['chk'] = false; // 반복문 통해 체크박스 넣기
                    this.items[i]['sum'] = 0;     // 반복문 통해 합계 넣기
                    this.items[i]['cnt1'] = 1;
                } 


                // forEach 구문. 위의 for 구문이랑 같음!
                // for(let tmp of this.items) {
                //     tmp['chk'] = false
                // }

                // 백엔드에서 받은 값 출력 [{},{},{},{},{}]
                console.log(this.items);
            }
        }
    }
</script>

<style scoped>

</style>