Skip to content

Commit

Permalink
Do not use watch inside onMount
Browse files Browse the repository at this point in the history
  • Loading branch information
yaaax committed Jul 11, 2024
1 parent 5c40cf8 commit 8f8d04e
Showing 1 changed file with 10 additions and 11 deletions.
21 changes: 10 additions & 11 deletions confiture-web-app/src/pages/audit/AuditGenerationPage.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { sortBy } from "lodash-es";
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { computed, onBeforeUnmount, ref, watch } from "vue";
import { onBeforeRouteLeave, useRoute } from "vue-router";
import AraTabs from "../../components/audit/AraTabs.vue";
Expand Down Expand Up @@ -157,17 +157,16 @@ const auditGenerationHeader = ref<InstanceType<
const stickyTop = ref<string>("0");
let resizeObserver: ResizeObserver | null = null;
onMounted(async () => {
// Because auditGenerationHeader ref is inside a "v-if",
// Vue will not instantiate the ref immediately.
// We need to watch it before observing nested stickyIndicator
watch(auditGenerationHeader, async () => {
const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
resizeObserver = new ResizeObserver((entries) => {
stickyTop.value = entries[0].target.clientHeight + "px";
});
stickyIndicator && resizeObserver.observe(stickyIndicator);
// Because auditGenerationHeader ref is inside a "v-if",
// Vue will not instantiate the ref immediately.
// We need to watch it before observing nested stickyIndicator
watch(auditGenerationHeader, async () => {
const stickyIndicator = auditGenerationHeader.value?.stickyIndicator;
resizeObserver = new ResizeObserver((entries) => {
stickyTop.value = entries[0].target.clientHeight + "px";
});
stickyIndicator && resizeObserver.observe(stickyIndicator);
});
onBeforeUnmount(() => {
Expand Down

0 comments on commit 8f8d04e

Please sign in to comment.