From 91e5691895d396dfdbefe732579fbbb46a9b0ff3 Mon Sep 17 00:00:00 2001 From: Rijk van Zanten Date: Tue, 9 Jun 2020 13:47:59 -0400 Subject: [PATCH] Use immediate watcher where needed (#689) --- src/app.vue | 22 +++++++------ .../v-field-template/v-field-template.vue | 2 +- src/components/v-menu/use-popper.ts | 16 ++++++---- src/components/v-menu/v-menu.vue | 32 ++++++++++++------- src/composables/groupable/groupable.ts | 2 +- src/composables/use-item/use-item.ts | 2 +- src/composables/use-items/use-items.ts | 24 ++++++++------ 7 files changed, 60 insertions(+), 40 deletions(-) diff --git a/src/app.vue b/src/app.vue index 6c344cf4d7..4dd89aabef 100644 --- a/src/app.vue +++ b/src/app.vue @@ -37,16 +37,20 @@ export default defineComponent({ const { width } = useWindowSize(); - watch(width, (newWidth, oldWidth) => { - if (newWidth === null || newWidth === 0) return; - if (newWidth === oldWidth) return; + watch( + width, + (newWidth, oldWidth) => { + if (newWidth === null || newWidth === 0) return; + if (newWidth === oldWidth) return; - if (newWidth >= 1424) { - if (drawerOpen.value === false) drawerOpen.value = true; - } else { - if (drawerOpen.value === true) drawerOpen.value = false; - } - }); + if (newWidth >= 1424) { + if (drawerOpen.value === false) drawerOpen.value = true; + } else { + if (drawerOpen.value === true) drawerOpen.value = false; + } + }, + { immediate: true } + ); watch( () => userStore.state.currentUser, diff --git a/src/components/v-field-template/v-field-template.vue b/src/components/v-field-template/v-field-template.vue index e98b3d7a56..6a6460991e 100644 --- a/src/components/v-field-template/v-field-template.vue +++ b/src/components/v-field-template/v-field-template.vue @@ -57,7 +57,7 @@ export default defineComponent({ const { collection } = toRefs(props); const { tree } = useFieldTree(collection); - watch(() => props.value, setContent); + watch(() => props.value, setContent, { immediate: true }); onMounted(setContent); return { tree, addField, onInput, contentEl, onClick, onKeyDown, menuActive }; diff --git a/src/components/v-menu/use-popper.ts b/src/components/v-menu/use-popper.ts index 8b30d27a0b..e837914f20 100644 --- a/src/components/v-menu/use-popper.ts +++ b/src/components/v-menu/use-popper.ts @@ -26,12 +26,16 @@ export function usePopper( stop(); }); - watch(options, () => { - popperInstance.value?.setOptions({ - placement: options.value.attached ? 'bottom-start' : options.value.placement, - modifiers: getModifiers(), - }); - }); + watch( + options, + () => { + popperInstance.value?.setOptions({ + placement: options.value.attached ? 'bottom-start' : options.value.placement, + modifiers: getModifiers(), + }); + }, + { immediate: true } + ); const observer = new MutationObserver(() => { popperInstance.value?.forceUpdate(); diff --git a/src/components/v-menu/v-menu.vue b/src/components/v-menu/v-menu.vue index 60fa1edc79..4373b5b2db 100644 --- a/src/components/v-menu/v-menu.vue +++ b/src/components/v-menu/v-menu.vue @@ -130,11 +130,15 @@ export default defineComponent({ const { isActive, activate, deactivate, toggle } = useActiveState(); - watch(isActive, () => { - Vue.nextTick(() => { - popper.value = document.getElementById(id.value); - }); - }); + watch( + isActive, + () => { + Vue.nextTick(() => { + popper.value = document.getElementById(id.value); + }); + }, + { immediate: true } + ); const { onClick, onPointerEnter, onPointerLeave } = useEvents(); @@ -177,13 +181,17 @@ export default defineComponent({ }, }); - watch(popper, async () => { - if (popper.value !== null) { - await start(); - } else { - stop(); - } - }); + watch( + popper, + async () => { + if (popper.value !== null) { + await start(); + } else { + stop(); + } + }, + { immediate: true } + ); return { isActive, activate, deactivate, toggle }; diff --git a/src/composables/groupable/groupable.ts b/src/composables/groupable/groupable.ts index 034993562c..260947a893 100644 --- a/src/composables/groupable/groupable.ts +++ b/src/composables/groupable/groupable.ts @@ -100,7 +100,7 @@ export function useGroupableParent( // Whenever the value of the selection changes, we have to update all the children's internal // states. If not, you can have an activated item that's not actually active. - watch(() => selection.value, updateChildren); + watch(selection, updateChildren); // It takes a tick before all children are rendered, this will make sure the start state of the // children matches the start selection diff --git a/src/composables/use-item/use-item.ts b/src/composables/use-item/use-item.ts index 9f9b63d438..b9fbabc77a 100644 --- a/src/composables/use-item/use-item.ts +++ b/src/composables/use-item/use-item.ts @@ -26,7 +26,7 @@ export function useItem(collection: Ref, primaryKey: Ref, query: Query) { getItems(); - watch(collection, async (after, before) => { - if (!before || isEqual(after, before)) { - return; - } + watch( + collection, + async (after, before) => { + if (!before || isEqual(after, before)) { + return; + } - // Waiting for the tick here makes sure the query have been adjusted for the new - // collection - await Vue.nextTick(); - reset(); - getItems(); - }); + // Waiting for the tick here makes sure the query have been adjusted for the new + // collection + await Vue.nextTick(); + reset(); + getItems(); + }, + { immediate: true } + ); watch([page, fields], async (after, before) => { if (!before || isEqual(after, before)) {