Currently, I am working on implementing a SnackBar component on my website. The requirement is that the snackbar should appear when the user clicks the submit button. How can I pass my snackbar component to the button inside my Add.vue file? I want to be able to reuse the snackbar component as there are multiple submission forms.
SnackBar.vue located in the components folder
<template>
<div class="text-center ma-2">
<v-snackbar
v-model="snackbar"
>
{{ 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() {
return {
snackbar: false,
text: `Hello, I'm a snackbar`,
};
},
}
</script>
Add.vue file where the button is located
<template>
<base-form title="Add">
<template v-slot:actions>
<v-btn
color="secondary"
type="submit"
>
<div>Save</div>
</v-btn>
</template>
</base-form>
</template>