-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
페이지의 장바구니 담기 기능 관련 오류
23.01.10 10:29 작성 23.01.10 10:30 수정 조회수 286
1
<template>
<div>
<div class="container">
<div class="main-panel">
<img
class="product-image"
:src="product.imageUrl"
:alt="product.name"
/>
</div>
<div class="side-panel">
<p class="name">{{ product.name }}</p>
<p class="price">{{ product.price }}</p>
<button type="button" @click="addToCart">Add to Cart</button>
</div>
</div>
</div>
</template>
<script>
import {fetchProductById} from '@/api/index'
export default {
async asyncData({ params }) {
const response = await fetchProductById(params.id);
const product = response.data
return{ product }
},
methods: {
addToCart() {
this.$store.commit('addCartItem',this.product);
this.$router.push('/cart')
console.log("hi success")
}
}
}
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
margin: 2rem 0;
}
.product-image {
width: 500px;
height: 375px;
}
.side-panel {
display: flex;
flex-direction: column;
justify-content: center;
width: 220px;
text-align: center;
padding: 0 1rem;
}
</style>
export const state= () => ({
cartItems: [''],
})
export const mutations = {
addCartItem(state, cartItem) {
state.cartItems.push(cartItem)
},
}
코드를 다음과 같이 작성했는데 강의처럼 addCartItem이 안나옵니다.
답변을 작성해보세요.
0
장기효(캡틴판교)
지식공유자2023.01.16
안녕하세요, 개발자 도구 UI가 변경되어서 헷갈리셨겠네요 ㅜㅜ 첨부해 주신 도구의 세번째 탭을 클릭해 보시면 mutations을 확인하실 수 있을 겁니다 :)
답변 1