Pass data to Component in conditional rendered div
Hey, I am trying to make a "Toast" component which shows a little popup on the top left corner of the screen. The Popup itself appears but the 2 props I am passing are not getting rendered.
This is the whole Toast class:
And this is my v-if div:
this are my ref's which I am using for the data:
and this is how I call the toast:
This is the whole Toast class:
<script lang="ts" setup>
const props = defineProps({
text: {
type: String,
required: true
},
type: {
type: String,
required: true
}
})
</script>
<template>
<div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg v-if="props.type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<svg v-if="props.type === 'error'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal">{{ props.text }}</div>
</div>
</template><script lang="ts" setup>
const props = defineProps({
text: {
type: String,
required: true
},
type: {
type: String,
required: true
}
})
</script>
<template>
<div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
<svg v-if="props.type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
<svg v-if="props.type === 'error'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Check icon</span>
</div>
<div class="ml-3 text-sm font-normal">{{ props.text }}</div>
</div>
</template>And this is my v-if div:
<div v-if="showToast">
<Toast :text="toastMessage.value" :type="toastType.value"/>
</div> <div v-if="showToast">
<Toast :text="toastMessage.value" :type="toastType.value"/>
</div>this are my ref's which I am using for the data:
const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')const showToast = ref(false)
const toastMessage = ref('')
const toastType = ref('success')const triggerToast = (message: string, type: string) => {
toastMessage.value = message
toastType.value = type
showToast.value = true
setTimeout(() => {
showToast.value = false
}, 5000)
}const triggerToast = (message: string, type: string) => {
toastMessage.value = message
toastType.value = type
showToast.value = true
setTimeout(() => {
showToast.value = false
}, 5000)
}