diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/url_sync.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/url_sync.vue | 20 |
1 files changed, 17 insertions, 3 deletions
diff --git a/app/assets/javascripts/vue_shared/components/url_sync.vue b/app/assets/javascripts/vue_shared/components/url_sync.vue index 2844d9e9e94..925c6008836 100644 --- a/app/assets/javascripts/vue_shared/components/url_sync.vue +++ b/app/assets/javascripts/vue_shared/components/url_sync.vue @@ -2,11 +2,18 @@ import { historyPushState } from '~/lib/utils/common_utils'; import { mergeUrlParams } from '~/lib/utils/url_utility'; +/** + * Renderless component to update the query string, + * the update is done by updating the query property or + * by using updateQuery method in the scoped slot. + * note: do not use both prop and updateQuery method. + */ export default { props: { query: { type: Object, - required: true, + required: false, + default: null, }, }, watch: { @@ -14,12 +21,19 @@ export default { immediate: true, deep: true, handler(newQuery) { - historyPushState(mergeUrlParams(newQuery, window.location.href, { spreadArrays: true })); + if (newQuery) { + this.updateQuery(newQuery); + } }, }, }, + methods: { + updateQuery(newQuery) { + historyPushState(mergeUrlParams(newQuery, window.location.href, { spreadArrays: true })); + }, + }, render() { - return this.$slots.default; + return this.$scopedSlots.default?.({ updateQuery: this.updateQuery }); }, }; </script> |