I am trying to dynamically load content in a Vue component based on a specific argument provided. Here is an example code snippet:
ParentComponent.vue
<Suspense>
<div class="row g-0">
<div class="col-md-3">
<ChildComponent json-url="some/url/to/json/data" />
</div>
<div class="col-md-3">dt;
<ChildComponent json-url="some/url/to/json/data" />
</div>
<div class="col-md-3">
<ChildComponent json-url="some/url/to/json/data" />
</div>
<div class="col-md-3"t;
<ChildComponent json-url="some/url/to/json/data" />
</div>
</div>
<template #fallback>
<p>Loading...</p>
</template>
ChildComponent.vue
<template>
<!-- Display content based on the loaded JSON data -->
</template>
<script setup>
import { ref, onMounted} from 'vue';
defineProps({jsonUrl: {
type: String,
default: ""
}})
const images = ref(null);
const thumbnail = ref(null);
const title = ref("");
const description = ref("");
onMounted(async () => {
try {
const response = await fetch(new URL(jsonUrl, import.meta.url).href);
if (!response.ok) {
throw new Error('Network response was not ok');
}
var jsonData = await response.json();
images = jsonData["images"];
thumbnail = jsonData["thumbnail"];
title = jsonData["title"];
description = jsonData["description"];
console.log(thumbnail);
} catch (error) {
console.error('Error fetching the JSON file:', error);
}
});
</script>
The issue I'm encountering is that the jsonUrl doesn't seem to be accessible during the onMounted() callback. Despite correct naming and implementation, it's not recognized within this function. However, when using <p>{{json}}</p> directly in the template, the URLs are displayed correctly.
Although I've searched for solutions, it appears that the property should be accessible. For instance, a post on StackOverflow here demonstrates a similar approach (only difference being TypeScript usage). How can I properly load and initialize my content based on JSON data within my child component in this scenario?