diff --git a/src/pages-service/tickets/components/TicketHome.vue b/src/pages-service/tickets/components/TicketHome.vue index f404799..644128b 100644 --- a/src/pages-service/tickets/components/TicketHome.vue +++ b/src/pages-service/tickets/components/TicketHome.vue @@ -135,6 +135,9 @@ const groupOffsets = ref([]) const rightScrollTop = ref(0) const instance = getCurrentInstance() const productsById = computed(() => new Map(props.products.map((product) => [product.id, product]))) +const groupLayoutSignature = computed(() => props.groups + .map((group) => `${group.id}:${(group.productIds || []).join(',')}`) + .join('|')) const productsForGroup = (group) => (group.productIds || []) .map((productId) => productsById.value.get(productId)) @@ -197,7 +200,10 @@ const handleProductScroll = (event) => { } onMounted(measureGroupOffsets) -watch(() => props.groups.map((group) => group.id).join(','), measureGroupOffsets) +watch(groupLayoutSignature, () => { + groupOffsets.value = [] + measureGroupOffsets() +}, { flush: 'post' }) const makePhoneCall = () => { if (!props.scenicSpot.phone) return diff --git a/src/pages-service/tickets/view-contract.test.mjs b/src/pages-service/tickets/view-contract.test.mjs index 4b8dd00..247a0bf 100644 --- a/src/pages-service/tickets/view-contract.test.mjs +++ b/src/pages-service/tickets/view-contract.test.mjs @@ -60,6 +60,9 @@ test("storefront synchronizes the left category from right-column scrolling", as assert.match(source, /groupOffsets/); assert.match(source, /scrollTop/); assert.match(source, /leftScrollIntoViewId/); + assert.match(source, /groupLayoutSignature/); + assert.match(source, /group\.productIds/); + assert.match(source, /groupOffsets\.value = \[\]/); assert.match(source, /TopNavBar/); });