I am using a computed property (in Vue 3 with the composition API) and binding it to an img src attribute.
const arrowUrl = computed(() =>
width.value > thresholds.value.xl
? '/img/elements/arrow.svg'
: '/img/elements/arrow_small.svg'
);
<img :src="arrowUrl"></img>
When I inspect the first call of the computed property (on load with a breakpoint):
- The
/img/elements/arrow_small.svgis already displayed. - It returns
/img/elements/arrow.svgbut it won't display it.
I changed the width of the frame lower than the thresholds.value.xl and then I changed it back to the initial width and the right img src (/img/elements/arrow.svg) is displayed.
I don't understand why the arrow_small.svg is displayed before the first call of the computed property and why when I change the width of the frame it works.
What am I missing?
