I need to develop a custom toast component that includes a personalized message and class. While I have successfully passed the message as props, I am encountering difficulties in applying the bootstrap class.
Component File: Toast.vue
<script setup>
const props = defineProps({
message:{
type:String,
default:'My message'
},
customClass:{
type:String,
default:'text-bg-info'
}
})
</script>
<template>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div ref="toast1" id='showToast' class="toast" :class={{props.customClass}} role="alert">
<div class="toast-body">
<span>{{ props.message }}</span>
</div>
</div>
</div>
</template>
Parent Component Home.vue:
<script setup>
import Form from '../components/Form.vue'
import Toast from '../components/Toast.vue'
</script>
<template>
<main class="mt-5">
<Form />
<Toast
message="Success!"
customClass="text-bg-success"
></Toast>
</main>
</template>