compact nimbus
Hello everybody! this might be a bit of a beginner question:
I'm currently trying to make a very simple checkbox filter. It does "work" i guess, but it fails to preserve the page state (the fade animation is used when leaving and entering a page) and wierdly it preserved the scroll...
this is what i did on my client-side:
<div v-for="dd in downloadType">
<label>{{dd.title}}
<input type="checkbox" v-model="filtered" :value="dd.id">
</label>
</div>
const props = defineProps({
unduh: Object,
downloadType: Object,
});
let filtered = ref([]);
watchDebounced(filtered, value =>{
router.get('/unduhan', { filter: value } , { replace: true, preserveState: true, preserveScroll: true, only: ['unduh'] });
},{debounce: 1000, maxWait:5000});```
and this is my server-side controller:
public function Downloads(Request $req)
{
$ids = [];
$test = downloads::get()->all();
if(!empty($req->all()['filter'])){
foreach ($req->all()['filter'] as $key => $value) {
array_push($ids, (int)$value);
}
$test = downloads::whereIn('downloadType_id', $ids)->get();
}
$downloadType = downloadType::get()->all();
return Inertia::render('Downloads',[
"downloadType" => fn() => downloadType::get()->all(),
"unduh" => $test,
]);
}
my end goal here is to preserve the checkbox, because after it reloaded the page, the checkbox is not checked anymore...
additional info:
im using vite
fast patrol
