Привязка ввода в поле поиска

resources/js/Composables/useMedicalHistoryFilter.js

@@ -164,6 +164,8 @@ export const useMedicalHistoryFilter = (initialFilters = {}) => {
         filtersRef.value.date_extract_to ? convertToTimestamp(filtersRef.value.date_extract_to) : null
     ])
 
+    const searchValue = ref(filtersRef.value.search ?? null)
+
     const handleDateRangeChange = (timestamps) => {
         dateRange.value = timestamps || [null, null]
 
@@ -338,6 +340,7 @@ export const useMedicalHistoryFilter = (initialFilters = {}) => {
         isLoading,
         activeFilters,
         dateRange,
+        searchValue,
         databaseInfo,
         databaseStats,
 

resources/js/Pages/Home/Index.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 })
 
 const {
-    isLoading, applyFilters, filtersRef, handleSearch, dateRange,
+    isLoading, applyFilters, filtersRef, handleSearch, dateRange, searchValue,
     handleDateRangeChange, handleViewTypeChange, handleStatusChange
 } = useMedicalHistoryFilter(props.filters)
 
@@ -49,7 +49,7 @@ const handleBeforeLeave = (tabName) => {
 <!--                </NRadioGroup>-->
                 <NFlex class="pb-4" align="center" :wrap="false">
                     <NFormItem class="w-[720px]" label="Поиск" :show-feedback="false">
-                        <NInput placeholder="Поиск по ФИО, № карты" @update:value="val => handleSearch(val)" size="large" />
+                        <NInput placeholder="Поиск по ФИО, № карты" v-model:value="searchValue" @update:value="val => handleSearch(val)" size="large" />
                     </NFormItem>
                     <NDivider vertical />
                     <NFormItem class="w-[340px]" label="Дата выписки" :show-feedback="false">