laravel-vue-file-share/resources/js/Components/custom/SearchForm.vue
2023-10-17 22:45:04 -07:00

33 lines
840 B
Vue

<script setup>
import { router, useForm } from "@inertiajs/vue3";
import TextInput from "../TextInput.vue";
import { ref } from "vue";
import { onMounted } from "vue";
const query = ref("");
let parameters = "";
const onChange = () => {
parameters.set("search", query.value);
router.get(`${window.location.pathname}?${parameters.toString()}`);
};
onMounted(() => {
parameters = new URLSearchParams(window.location.search);
query.value = parameters.get("search");
});
</script>
<template>
<div class="w-full h-[5rem] flex items-center">
<TextInput
type="text"
class="block w-full mr-2"
v-model="query"
autocomplete
placeholder="Search for files or folders"
@keyup.enter.prevent="onChange()"
></TextInput>
</div>
</template>