How to display snackbars in Vuetify?

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

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.