Shop.vue_20211222

<template>
    <div>

        <el-row :gutter="20" v-for="tmp in items.length/cnt" :key="tmp">
        <!-- gutter는 개체 사이의 여백 -->
            <el-col :span="24/cnt" v-for="tmp1 in cnt" :key="tmp1" style="cursor:pointer" 
                @click="handleOrder(items[ (tmp-1) * cnt + (tmp1-1) ].code)">
            <!-- span은 기본값 24임.  -->
            <el-image :src="items[ (tmp-1) * cnt + (tmp1-1) ].img" />
            <p>물품명: {{ items[ (tmp-1) * cnt + (tmp1-1) ].name }} </p><!-- 한 줄에 3개씩 나오게 하는 방정식 -->
            <p>가격: {{ items[ (tmp-1) * cnt + (tmp1-1) ].price }} </p><!-- 한 줄에 3개씩 나오게 하는 방정식 -->
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        created() {
            this.handleData();
        },

        data() {
            return {
                items: [],
                cnt  : 4,
            }
        },

        methods: {
            handleOrder(code) { // 주문페이지(Order)로 이동
                console.log("Shop.vue => handleOrder", code);

                this.$router.push({
                    path:'/order',
                    /* path - query로 전달 O. params는 전달 X
                    name: 'Order' 로 할 때는 path, params 둘 다 전달 O 
                    query는 주소창에 정보 표시, params는 주소창에 정보 표시 X (중요한 정보일 때 사용. 1회만) */
                    query: { icode: code },
                    params: { key: '숨김정보' }
                });
            },

            handleData() {
                for(let i=0; i<12; i++) { // 0~11. 총 12개
                    this.items.push({
                        code: i + 1,
                        name: '사과' + i,
                        price: 1000 + i,
                        qty: 1000 - i,
                        img: 'https://picsum.photos/500/300?image=' + (1 + i)
                    });
                }
            }
        }
    }
</script>

<style scoped>

</style>