I am facing an issue where I am able to fetch data correctly from the API, but I am unable to display it. When I manually input items, they are displayed, but the items fetched from the API remain invisible. I even attempted to move the API call directly into the ActivitiePage component, but unfortunately, no changes were observed.
Item.vue:
<div class="item-container">
<img :src="item.Image" alt="Item Image" class="item-image">
<div class="item-details">
<div class="item-text">{{ item.Text }}</div>
</div>
</div>
</template>
<script>
},
props: {
item: Object,
},
}
</script>
ActivitiePage:
<div id="app">
<ul>
<option v-for="time in itemTimes" :key="time">{{ time }}</option>
</select>
<item v-for="item in items" :key="item.Text" :item="item" @share="onShareButtonClick" />
</ul>
<div v-if="loading">Loading...</div>
<div v-else>
<div v-if="items.length === 0">No items available.</div>
<div v-else>
<div>Items:</div>
<pre>{{ JSON.stringify(items, null, 2) }}</pre>
</div>
</div>
</div>
</template>
<script>
import Item from '@/components/Item.vue';
import SearchBar from '@/components/SearchBar.vue';
export default {
components: {
Item,
},
created() {
fetch('/api/v1/Activities/all')
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok, status: ${response.status}`);
}
return response.json();
})
.then(data => {
this.items = data;
this.loading = false;
})
.catch(error => {
console.error('Error retrieving items:', error);
this.loading = false;
});
},
};
</script>