System Information
- Strapi Version: 4
- Operating System: win 10
- Database: Strapi
- Node Version: 14.19.1
- NPM Version: 6.14
Parent component of the single product template:
<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import ProductSingle from "@/components/ProductSingle.vue";
let productDetails = ref({});
const route = useRoute();
const error = ref(null);
const url = import.meta.env.VITE_STRAPI_URL;
const apiUrl = url + "/api/products/" + route.params.id + "?populate=*";
onMounted(() => {
fetchAllProductDetails();
// console.log(productDetails);
});
const fetchAllProductDetails = () => {
fetch(apiUrl)
.then((response) => response.json())
.then((data) => {
productDetails.value = data.data.attributes;
})
.catch((err) => (error.value = console.log(err)));
};
</script>
<template>
<div>
<ProductSingle :product-details="productDetails" :url="url" />
</div>
</template>
Childcomponent:
<script setup>
import { useGetProductImage } from "@/composables/useGetProductImage";
defineProps({
productDetails: Object,
url: String,
});
</script>
<template>
<div>
<h2>{{ productDetails.name }}</h2>
<hr />
<p>{{ productDetails.description }}</p>
<hr />
<p>{{ productDetails.price }}</p>
<hr />
<img
:src="useGetProductImage(productDetails.image.data.attributes.url)"
alt=""
/>
</div>
</template>
Additionally if I save the data from fetch NOT in data.data.attributes but rather data.data I can’t reach the first level objects and that crashes the site as well.
Can you point out what I’m doing wrong?
Thanks in advance
