45 lines
874 B
Vue
45 lines
874 B
Vue
<script setup>
|
|
const city = ref("");
|
|
const cityError = ref(false);
|
|
|
|
const handleSearch = () => {
|
|
if (!city.value) {
|
|
cityError.value = true;
|
|
return;
|
|
}
|
|
navigateTo(`city/${city.value}/car`);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
|
|
|
|
<div
|
|
class="
|
|
font-serif
|
|
w-[1000px]
|
|
text-2xl
|
|
rounded-full
|
|
bg-white
|
|
flex
|
|
justify-between
|
|
overflow-hidden
|
|
drop-shadow-2xl
|
|
mx-auto"
|
|
:class="cityError ? 'border-red-500 border' : '' ">
|
|
|
|
<input
|
|
class="
|
|
py-3 px-5
|
|
w-full
|
|
text-2xl
|
|
rounded-full
|
|
focus:outline-none"
|
|
type="text"
|
|
placeholder="Search by city..." v-model="city"/>
|
|
<button class="bg-sky-500 px-10text-white" @click="handleSearch">Search</button>
|
|
</div>
|
|
|
|
|
|
|
|
</template> |