Conditional Rendering Vue 3

Hello dear colleagues,

My problem is quite simple. I’m trying to show a notification at the top of my menu screen.
The notification will appear whenever a variable is true.

The code I made is this one below:

	<template>
	<div id="nav">
		<router-link :to="{ name: 'Agenda' }">Ver Agendamento de Requisição</router-link> |
		<router-link :to="{ name: 'AtualizaPerfilUsuario' }">Atualiza Perfil de Usuário</router-link> |
		<div id="notificacaoAgendamento">
			<h3 v-if="requisicaoConcluida.value"> You have completed appointments!!!</h3>
		</div>
	</div>
	<router-view />
</template>
<script>
	import {ref} from 'vue'
	import $ from 'jquery';
	import UtilsApplication from '@/utils.application.js'

	export default {
		name: 'App',
		setup() {			
			let requisicaoConcluida = ref(false)
			let statusReqParam = ref('PENDENTE')
				$(document).ready(async function() {		
					let data = await UtilsApplication.agendamentos(statusReqParam.value);
					
					if(data.length > 0){
						console.log('possui requisicoes concluidas')	
						requisicaoConcluida = ref(true)
					}

				});
		return {
			requisicaoConcluida,
			statusReqParam
		}
	}
}
</script>

I’m using Vue 3 and composition and I would like to know why the message “You have completed appointments!!!” is not being displayed, even checking through debug that the variable “data” is coming filled with several elements and the variable requisicaoConcluida is being set to “true” inside the setup() method ?
Do I need to perform a forced render?

thankful,

Adenilson

You should not use requisicaoConcluida.value in the HTML code, but just requisicaoConcluida. Vue will automatically unwrap it. Don’t know if this is the reason it doesn’t work though.

Sorry, I’m probably wrong, just read in the docs:

This is just a convenience feature of text interpolation and is equivalent to {{ object.foo.value }}.

You don’t use text interpolation, so probably doesn’t apply there.

The problem is probably here:

						requisicaoConcluida = ref(true)

You create a new ref. Instead, you should change the existing ref to store a new value, like:

						requisicaoConcluida.value = true

Hi Pepel,

I tried to do as you suggested but it didn’t work.
Could it be something related to responsiveness or the fact that I don’t make the variable binding through the v-model to the variable?

Does anyone have any guesses?

Adenilson