<input type="text" placeholder="Search Beers e.g. Pale Ale" v-model="input" @keyup.enter="searchBeer" />
Although i added the search function in the input, it still isn't working
const input = ref("");
let pgNo = ref(1);
let url = `https://api.punkapi.com/v2/beers?page=${pgNo.value}&per_page=12`;
const { data: beers, refresh, error} = await useFetch(
() => url
);
const searchBeer = async() => {
const formattedSearch = input.value;
url.concat(`&beer_name=${formattedSearch}`);
}
You should use a computed property for the url. Whenever the other refs change, the value of url will be automatically updated.
<template>
<form @submit.prevent="searchBeer">
<input
v-model="beerName"
type="text"
placeholder="Search Beers e.g. Pale Ale"
/>
</form>
</template>
<script setup>
const beerName = ref('')
const pageNumber = ref(1)
const url = computed(() => {
let str = `https://api.punkapi.com/v2/beers?page=${pageNumber.value}&per_page=12`
if (beerName.value) {
str += `&beer_name=${beerName.value}`
}
return str
})
const searchBeer = async () => {
const data = await $fetch(url.value)
// ...
}
</script>
