I am facing an issue with my Vue component where I am trying to set the image src using data from my api.
const product = computed(() => {
return store.products.find(product => product.slug === route.params.slug);
});
const selectedImage = ref(null);
function setMainImage(image) {
selectedImage.value = image.original_url;
}
onMounted( () => {
selectedImage.value = product.default_image;
});
The data is visible in Vue dev tools:
product:Object (Computed)
default_image:"http://localhost/storage/1/photo-1600210492493-0946911123ea.jpeg"
description:"Lorem ipsum dolor sit ..."
id:1
However, the image is not appearing in my component:
<img v-bind:src="selectedImage">
If anyone has any insights on why this might be happening, please let me know!
EDIT
Here is some information about the cart store:
import axios from "axios";
import { defineStore } from "pinia";
import { useStorage } from '@vueuse/core';
export const useCartStore = defineStore({
id: 'cart',
state: () => ({
cart: useStorage('cart', { products: [], packages: [] }),
order: {},
customer: {},
loading: true,
error: null,
categories: [],
products: [],
packages: [],
}),
actions: {
async getProducts() {
try {
this.loading = true;
const resProduct = await axios.get("/api/product");
this.products = resProduct.data.data;
const resPackage = await axios.get("/api/package");
this.packages = resPackage.data.data;
this.loading = false;
} catch (error) {
this.error = error;
}
},
...