Update props names in Type17Keluhan.vue and Type17Gangguan.vue files

src/components/Form/FiltersType/Type17Keluhan.vue

@@ -25,9 +25,9 @@ const props = defineProps({
   reportType: {
     type: Array as PropType<any[]>,
     default: [
-      { id: 1, name: 'No Lapor' },
-      { id: 2, name: 'Nama Pelapor' },
-      { id: 3, name: 'Permasalahan' }
+      { id: 1, title: 'No Lapor' },
+      { id: 2, title: 'Nama Pelapor' },
+      { id: 3, title: 'Permasalahan' }
     ]
   },
   statusType: {
@@ -67,18 +67,14 @@ const props = defineProps({
   }
 })
 
-const searchBy = ref<any>(props.reportType[0].title)
-const status = ref(props.statusType[0])
-const sla = ref(props.slaType[0])
-
 const data = ref({
   uid: { id: 0, name: uidPlaceholder },
   up3: { id: 0, name: up3Placeholder },
   ulp: { id: 0, name: ulpPlaceholder },
-  status: status.value,
+  status: props.statusType[0],
   keyword: keyword.value,
-  searchBy: searchBy.value,
-  sla: sla.value,
+  searchBy: props.reportType[0].title,
+  sla: props.slaType[0],
   periode: ''
 })
 const renderUp3 = ref(false)
@@ -131,23 +127,31 @@ const setUlp = (value: any) => {
 }
 
 const setStatus = (value: any) => {
-  status.value = value
-  data.value.status = value
+  data.value = {
+    ...data.value,
+    status: value
+  }
 }
 
 const changeKeyword = (value: string) => {
-  keyword.value = value
-  data.value.keyword = value
+  data.value = {
+    ...data.value,
+    keyword: value
+  }
 }
 
 const changeReportTypeSelected = (id: any) => {
-  searchBy.value = props.reportType.find((item) => item.id == id)?.title
-  data.value.searchBy = searchBy.value
+  data.value = {
+    ...data.value,
+    searchBy: props.reportType.find((item) => item.id == id)?.title
+  }
 }
 
 const setSla = (value: any) => {
-  sla.value = value
-  data.value.sla = value
+  data.value = {
+    ...data.value,
+    sla: value
+  }
 }
 
 onMounted(() => {
@@ -205,7 +209,6 @@ onMounted(() => {
       <Select
         @update:selected="setStatus($event)"
         :data="statusType"
-        :selected="status"
         :placeholder="statusPlaceholder"
       />
     </div>
@@ -213,12 +216,7 @@ onMounted(() => {
     <div class="flex flex-col flex-1 space-y-2">
       <label class="filter-input-label">SLA:</label>
 
-      <Select
-        @update:selected="setSla($event)"
-        :data="slaType"
-        :selected="sla"
-        :placeholder="slaPlaceholder"
-      />
+      <Select @update:selected="setSla($event)" :data="slaType" :placeholder="slaPlaceholder" />
     </div>
 
     <div class="flex flex-col flex-1 space-y-2">