How to display snackbars in Vuetify? - vue.js

Question

Currently ,my snackbar is not showing after clicking the button. I want to pass the snackbar component function to my button which located in Add.vue. Is there any way to pass the component function?
Snackbar.vue in component folder
<template>
<div class="text-center ma-2">
<v-snackbar v-model="snackbar" :timeout="timeout" top color="primary">
{{ text }}
<template v-slot:action="{ attrs }">
<v-btn color="pink" text v-bind="attrs" #click="snackbar = false" >
Close
</v-btn>
</template>
</v-snackbar>
</div>
</template>
<script>
export default {
data: () => ({
snackbar: false,
text: 'My timeout is set to 2000.',
timeout: 2000,
})
}
</script>
Add.vue file
<template class="id">
<base-form title="Add Medical Activities">
<template v-slot:actions>
<SnackBar :snackbar="true"/>
<v-btn
dark
#click="snackbar = true"
>test</v-btn>
</template>
<form-input v-model="inputs" :select-multiple="false"></form-input>
</base-form>
</template>
<script>
import SnackBar from '~/components/SnackBar.vue'
export default {
components: { BaseForm, FormInput, SnackBar },

Answer 1

you only need boolean passed on your v-model
<v-snackbar v-model="snackbar">
hai
</v-snackbar>
<v-btn #click='snackbar = true'>
any operation that make change snackbar to true, snackbar will open it like what you expected

Answer 2

Try this out:
Add.v
<template>
<div>
<Snackbar :key="snakKey" v-if="showSnackbar" #toggleSnackbar="showSnackbar = false" />
<v-btn color="primary" #click="snackbarHandler">
Show Snackbar
</v-btn>
</div>
</template>
<script>
export default {
name: "Add",
data: () => ({
showSnackbar: false,
snakKey: 0,
}),
methods:{
snackbarHandler(){
this.snakKey++;
this.showSnackbar = true;
}
}
}
</script>
Snackbar.vue
<template>
<div class="text-center ma-2">
<v-snackbar v-model="snackbar" :timeout="timeout" top color="primary">
{{ text }}
<template v-slot:action="{ attrs }">
<v-btn color="pink" text v-bind="attrs" #click="$emit('toggleSnackbar')" >
Close
</v-btn>
</template>
</v-snackbar>
</div>
</template>
<script>
export default {
data: () => ({
snackbar: true,
text: 'My timeout is set to 2000.',
timeout: 3000,
})
}
</script>
I hope this helps you.