How to access html element inside a <q-dialog> ?

[luisSilva89]

I am trying to access a canvas html element, which is inside a q-dialog element, after onMounted(). However I cannot as the value I get on "myCanvas" variable is "null". Below is an excerpt of my code:

<template>
   <q-dialog v-model="carousel">
      <q-carousel transition-prev="slide-right" transition-next="slide-left" swipeable animated v-model="slide"
          control-color="primary" navigation-icon="radio_button_unchecked" navigation padding height="50vh"
          class="bg-white shadow-1 rounded-borders">

           <q-carousel-slide :name="1" class="column no-wrap flex-center">
            <q-icon name="crop_square" color="primary" size="56px" />
            <div class="q-mt-md text-center">
              <header class="text-h6 text-weight-light" style="">
                Select Section
              </header>
            </div>
            <div class="row">
              <canvas ref="myCanvas" width="500" height="250" @click="highlightSection">
              </canvas>
            </div>
          </q-carousel-slide>
       </q-carousel>
    </q-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

let carousel = ref(false);
let slide = ref(0);

const myCanvas = ref<HTMLCanvasElement | null>(null);
const ctx = ref<CanvasRenderingContext2D | null>(null);


onMounted(() => {
  console.log('myCanvas ', myCanvas.value)
  if (myCanvas.value !== null) {
    ctx.value = myCanvas.value.getContext('2d');
  }
})
</script>

If I take the canvas element somewhere outside the q-dialog tags I immediatelly get a value on myCanvas variable and I can work with it.
I recall this behaviour might be related with security reasons. So how could I get around it and still guarantee security?

[metalsadman]

Try to wrap the accessing of the template ref in a nextTick.

[luisSilva89]

Hi metalsadman, thanks for your reply.

I´ve tried your suggestion, though myCanvas value continues being null. Below the code I added:

Followed the vue 3 docs @ https://vuejs.org/api/general.html#nexttick

import { watch, nextTick } from 'vue';

let slide = ref(0);

async function startCanva() {
  await nextTick();
  console.log('onMount myCanvas ', myCanvas.value)
  if (myCanvas.value !== null) {
    ctx.value = myCanvas.value.getContext('2d');
  }
}

onMounted(() => {
  startCanva()
})

I had no luck making it work, the value is still null. However you got me thinking that maybe I have null on myCanvas because the html in which it resides has not yet been accessed so I tried a watcher. Since my canva is only used on my slide number 1 (I have slide 0 up to 6), I added the following watcher:

Followed vue 3 docs @ https://vuejs.org/api/reactivity-core.html#watch

watch(slide, (value) => {
  console.log('watch', value)
  console.log('myCanvas.value', myCanvas.value)

  if (value === 1 && myCanvas.value !== null) {
    ctx.value = myCanvas.value.getContext('2d');
    drawOnCanvas(warehouseLayout.data)
  }
})

Still when I reach my slide 1 i still get a null on myCanvas variable.
haven´t been able to solve it neither understand why I am unable to reach the canva html element.

Edit: edited this post to add references to the docs I used and to correct formatting and spelling mistakes.

[metalsadman]

i meant in the onMounted.

[luisSilva89]

onMounted(() => {
  nextTick(() => {
    console.log('canvas ', myCanvas.value)
    if (myCanvas.value !== null) {
      ctx.value = myCanvas.value.getContext('2d')
    }
  })
})

I´m still getting null on myCanvas value.

[metalsadman]

try to make a stackblitz and reproduce it there please.

[suleimanas]

because if i'm not wrong the content of the dialog only added after opening the dialog otherwise it'll be removed from the dom
try to get it on dialog @show event

[rstoenescu]

Yes. For performance reasons. No need to force Vue render when it serves no purpose.

[luisSilva89]

Thank you both!
I haven´t yet tried that approach suleimanas but your answer makes sense and rstoenescu just verified it.
As soon as I try it I´ll make sure to let you know if I was able to solve my issue.
Again thank you guys!