ProductDetail.vue:
<template>
<div>
<h1>{{ product.name }}</h1>
<p>{{ product.description }}</p>
<p>{{ product.price }}</p>
<button @click="addToCart">Add to Cart</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
product: null,
};
},
created() {
axios.get(`/api/products/${this.$route.params.id}`).then((response) => {
this.product = response.data;
});
},
methods: {
addToCart() {
this.$store.commit('addToCart', this.product);
},
},
};
</script>