<script>
export default {
data() {
return {
productId: 0,
productDetail: {},
productImage: [],
total: 0,
totalPrice: 0
};
},
created() {
this.productId = this.$route.query.product_id;
this.getProductDetail();
this.getProductImage();
},
methods: {
calculatePrice(cnt) {
let total = this.total + cnt;
if (total < 1) total = 1;
this.total = total;
this.totalPrice = this.productDetail.product_price * this.total;
},
async getProductDetail() {
let productDetail = await this.$api("/api/productDetail", { param: [this.productId] });
if (productDetail.length > 0) {
this.productDetail = productDetail[0];
this.totalPrice = this.totalPrice = this.productDetail.product_price * this.total;
}
console.log(this.productDetail);
},
async getProductImage() {
this.productImage = await this.$api("/api/productMainImage", { param: [this.productId] });
},
}
};
</script>
- data: productId, productDetail, productImage, total, totalPrice라는 데이터 속성을 초기화합니다. 각각은 현재 제품의 ID, 제품 상세 정보, 제품 이미지 목록, 수량, 총 가격을 나타냅니다.
- created: Vue 인스턴스가 생성될 때 호출되는 라이프사이클 훅 중 하나입니다. productId를 현재 라우터의 쿼리에서 가져와 getProductDetail 및 getProductImage 메서드를 호출하여 제품의 상세 정보와 이미지를 가져옵니다.
- methods: 컴포넌트에서 사용할 메서드들이 정의되어 있습니다.
- calculatePrice: 수량이 변경될 때 호출되는 메서드로, 총 가격을 다시 계산합니다.
- getProductDetail: API를 호출하여 제품의 상세 정보를 가져오는 메서드입니다. API에는 현재 제품의 ID가 매개변수로 전달됩니다.
- getProductImage: API를 호출하여 제품의 이미지 목록을 가져오는 메서드입니다.
'웹 > html' 카테고리의 다른 글
| vue.js 를 이용한 웹 앱 구현 - 프론트엔드 구축(1) (2) | 2023.11.26 |
|---|