Level 63
You can for example have an object with both filters and watch for any modification of the object with a deep watch.
https://vuejs.org/guide/essentials/watchers.html#deep-watchers
Oct 6, 2023
7
Level 1
How to pass multiple parameter of filter to watch function
I have two kind of filter one is search and other file is an option. How can I merge them in one watch function so I can use both as filter in the controller:
let search = ref('');
watch(search,(value)=>{
router.get('/contract',{search:value},{
preserveState:true,
replace:true
});
})
let filter = ref(0);
watch(filter, (value)=> {
router.get('/contract',{filter:value},{
preserveState:true,
replace:true
});
})
but with this when I search I can see that the list is replaced, but If I user filter, I get new values but the table is not refreshed
Level 1
I combined like this:
watch(filter, (value)=> {
router.get('/contract',{filter:value},{
preserveState:true,
replace:true
});
},
search,(value)=>{
filter = ref(0);
router.get('/contract',{search:value},{
preserveState:true,
replace:true
});
}
)
but the page does not refresh, after search it works but if I change the filter value, the page does not refresh the obtained value from the controller is correct
1 like
Level 63
@vannian Have you read what the documentation I suggested you ?
Level 1
yes I tried to add deep:
watch(
filter, (value)=> {
router.get('/contract',{filter:value},{
preserveState:true,
replace:true
});
},
search,(value)=>{
filter = ref(0);
router.get('/contract',{search:value},{
preserveState:true,
replace:true
});
},
{deep: true}
)
is not updating it
1 like
Level 63
@vannian I don't have said that.
I have said that you can create an object with both filters.
const search = reactive({
'text': '',
'filter': '',
})
And then watch for any modification of the object.
watch(
() => search,
() => {
// access search.text
// access search.filter
},
{ deep: true }
)
Level 1
@vincent15000 I understand this, my problem is not that the things are not reacting when is changed, the problem is when search text is changed, the cotroller returns date and the view is changed, but wieh filter value is changed, controller replies correctly but the ui does not updating
Level 1
I endup doing this and it is working:
let searchValue = ref('');
let optionValue = ref(0);
watch([searchValue,optionValue] ,() => {
router.get(route('contract.index', {
search: searchValue.value,
option: optionValue.value,
preserveState:true,
replace:true
}))
})
only think that is not working is the option and search filed values are erased, state is not preserver
Please or to participate in this conversation.