Skip to content

Instantly share code, notes, and snippets.

@sbeugen

sbeugen/reactive-pokemon-display.vue

Created November 19, 2022 18:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sbeugen/a9214cad93e9c55d2e567c479718d175 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sbeugen/a9214cad93e9c55d2e567c479718d175 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
reactive-pokemon-display.vue
<script setup>
const currentId = ref(1);
const url = computed(() => `https://pokeapi.co/api/v2/pokemon/${currentId.value}`);
const { data: currentPokemon } = useFetch(url, {pick: ["name", "sprites"]});
const nextPokemon = async () => {
currentId.value++;
};
const previousPokemon = async () => {
if (currentId.value > 1) {
currentId.value--;
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment