How do i call a component using event in Vuetify?

user_15820076 0
Viewed 94

Currently, i have to add a SnackBar component in my website. The expected output is the snackbar will show up when the user click the submit button. How do i pass my snackbar component to my button located inside my Add.vue file ? This is because I want to reuse my snackbar component because there are multiple submission form.

SnackBar.vue inside component file

<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: () => ({
      snackbar: false,
      text: `Hello, I'm a snackbar`,
    }),
  }
</script>

Add.vue

<template>
  <base-form title="Add">
      <template v-slot:actions>
            <v-btn
              color="secondary"
              type="submit"
            >
              <div>Save</div>
            </v-btn>
           
      </template>
 
  </base-form>

</template>
vuejs2 vuetify.js vue.js javascript
1 Answers

You can import your snack component and pass prop:

Vue.component('snack', {
  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="$emit('closed', false)"
          >
            Close
          </v-btn>
        </template>
      </v-snackbar>
    </div>
  `,
  props: {
    snackbar: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    text: `Hello, I'm a snackbar`,
  }),
})
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    show: false,
  }),
  methods: {
    submit(val) {
      this.show = val
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-btn
          color="secondary"
          type="submit"
          @click="submit(true)"
        >
          <div>Save</div>
        </v-btn>
        <snack :snackbar="show" @closed="submit(false)"></snack>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

user_119891890
Related