A Beginner’s Guide To Nuxt 3/

...

/

Solution Review: Create a Dog Photo Catalogue

Solution Review: Create a Dog Photo Catalogue

Create a project to fetch data from an API.

We'll cover the following...

Solution

The solution to the “Fetch Data From an API” challenge is provided below:

<script setup>
const userInput = ref("");
const breed = ref("");

const { data: images } = await useFetch(
	() => `https://dog.ceo/api/breed/${breed.value}/images/random/3`
);

function handleSearch() {
	breed.value = userInput.value;
}
</script>
<template>
	<header class="search_header">
		<input
			type="text"
			v-model="userInput"
			@keyup.enter="handleSearch"
			placeholder="Search for an image"
		/>
	</header>
	<ul class="images">
		<li v-for="image in images?.message" :key="image">
			<img class="img_preview" :src="image" width="500" />
		</li>
	</ul>
</template>
Implementation of the solution

Explanation

Here is an explanation of the above code solution:

    ...