Tips for making a versatile Vuetify Snackbar that can be used multiple times

Question

Tips for making a versatile Vuetify Snackbar that can be used multiple times

I am in the process of developing a reusable alert/snackbar component. My implementation looks like this:

Snackbar.vue

<template>
    <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
    </v-snackbar>
</template>

<script>
export default {
    name: 'Snackbar',
    props: {
        show: String,
        color: String,
        message: String
    }
}
</script>
<template>
    <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
    </v-snackbar>
</template>

<script>
export default {
    name: 'Snackbar',
    props: {
        show: String,
        color: String,
        message: String
    }
}
</script>

I have imported the component and passed props to it like this:

import Snackbar from '../../../components/Snackbar'

<Snackbar v-if="alert" color="alertColor" message="alertMessage" />
<Snackbar show="alert" color="alertColor" message="alertMessage" />

I have tested the 2 lines above, and these are the values of those 3 variables

alert = true
alertColor = green

alertMessage =

create.vue?f4fe:631 DB error - insert_marketing_campaign: Duplicate entry 'TEST' for key 'MARKETING_CAMPAIGN_AK'

Outcome

I am not seeing any errors in the console, but the snackbar is not appearing either. Please assist

javascript vue.js vuejs2 vue-component vuetify.js

Answer 1

Answer №1

Factorial of 8!

Your method of passing props values needs adjustment, you should follow this approach:

By the way, I included an event listener(update) for demonstration purposes to handle a close button(remove if not needed)

<Snackbar :show="alert" :color="alertColor" :message="alertMessage" v-on:update="alert = $event" />

Snackbar.vue

I made some changes in this file as well:

The way you are using props in the attributes is fine, but if you don't require concatenation with other values, keep it simple
The prop show should be a Boolean
Added a stylish button in case you wish to use it
v-model controls the visibility of the snackbar, however, you cannot directly use the prop show with v-model, which is why we have a computed property "show2"(quite imaginative) that reads(get) the value of the prop show and emits a custom event "update" if you intend to modify it(set)

<template>
    <v-snackbar transition="true" timeout="2000" v-model="show2" :color="color" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
        <v-btn color="red" text @click="show2 = false">Close</v-btn>
    </v-snackbar>
</template>
<script>
export default {
  props: {
    show: Boolean,
    color: String,
    message: String,
  },
  computed: {
    show2: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update", value);
      },
    },
  },
};
</script>

Trust this information is beneficial! ;)

Answer 2

Factorial of 8!

Your method of passing props values needs adjustment, you should follow this approach:

By the way, I included an event listener(update) for demonstration purposes to handle a close button(remove if not needed)

<Snackbar :show="alert" :color="alertColor" :message="alertMessage" v-on:update="alert = $event" />

Snackbar.vue

I made some changes in this file as well:

The way you are using props in the attributes is fine, but if you don't require concatenation with other values, keep it simple
The prop show should be a Boolean
Added a stylish button in case you wish to use it
v-model controls the visibility of the snackbar, however, you cannot directly use the prop show with v-model, which is why we have a computed property "show2"(quite imaginative) that reads(get) the value of the prop show and emits a custom event "update" if you intend to modify it(set)

<template>
    <v-snackbar transition="true" timeout="2000" v-model="show2" :color="color" absolute top outlined right>
        <strong>
            {{ message }}
        </strong>
        <v-btn color="red" text @click="show2 = false">Close</v-btn>
    </v-snackbar>
</template>
<script>
export default {
  props: {
    show: Boolean,
    color: String,
    message: String,
  },
  computed: {
    show2: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update", value);
      },
    },
  },
};
</script>

Trust this information is beneficial! ;)

Answer 3

Answer №2

Take a look at this sandbox I created for you: https://codesandbox.io/s/stack-71244492-vuex-snackbar-klfunf?file=/src/store/index.js

To set up a global snackbar in your App.vue file and update it with Vuex, you need to define a snackbar object in your Vuex store and implement a simple update mutation as well as a show action.

// store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    snackbar: { active: false, color: "", message: "", timer: 4000 }
  },
  mutations: {
    UPDATE_SNACKBAR(state, snackbar) {
      state.snackbar = snackbar;
    }
  },
  actions: {
    showSnack({ commit }, { message, color, timer }) {
      commit("UPDATE_SNACKBAR", {
        active: true,
        color: color,
        message: message,
        timer: timer
      });
    }
  }
});

Then, in your App.vue, you can configure it as follows

<v-snackbar
   v-model="snackbar.active"
   :color="snackbar.color"
   :right="true"
   :bottom="true"
   :timeout="snackbar.timer"
>
   {{ snackbar.message }}
   <template #action="{ attrs }">
      <v-btn
         color="white"
         text
         v-bind="attrs"
         @click="snackbar.active = false"
      >
         Close
      </v-btn>
   </template>
</v-snackbar>

<script>
import { mapState } from "vuex";
export default {
   name: 'App',
   data: () => ({
      drawer: false,
   }),
   computed: {        
    ...mapState(["snackbar"])    
   }
}
</script>

Once set up, you can trigger the snackbar from any component by simply executing the following code

// views/Home.vue
this.$store.dispatch('showSnack', {
   message: 'Testing, main page.',
   color: 'green darken-1'
})

// views/About.vue
this.$store.dispatch('showSnack', {
   message: 'Hello from about!',
   color: 'red darken-1',
   timer: 2000
})

Answer 4

Take a look at this sandbox I created for you: https://codesandbox.io/s/stack-71244492-vuex-snackbar-klfunf?file=/src/store/index.js

To set up a global snackbar in your App.vue file and update it with Vuex, you need to define a snackbar object in your Vuex store and implement a simple update mutation as well as a show action.

// store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    snackbar: { active: false, color: "", message: "", timer: 4000 }
  },
  mutations: {
    UPDATE_SNACKBAR(state, snackbar) {
      state.snackbar = snackbar;
    }
  },
  actions: {
    showSnack({ commit }, { message, color, timer }) {
      commit("UPDATE_SNACKBAR", {
        active: true,
        color: color,
        message: message,
        timer: timer
      });
    }
  }
});

Then, in your App.vue, you can configure it as follows

<v-snackbar
   v-model="snackbar.active"
   :color="snackbar.color"
   :right="true"
   :bottom="true"
   :timeout="snackbar.timer"
>
   {{ snackbar.message }}
   <template #action="{ attrs }">
      <v-btn
         color="white"
         text
         v-bind="attrs"
         @click="snackbar.active = false"
      >
         Close
      </v-btn>
   </template>
</v-snackbar>

<script>
import { mapState } from "vuex";
export default {
   name: 'App',
   data: () => ({
      drawer: false,
   }),
   computed: {        
    ...mapState(["snackbar"])    
   }
}
</script>

Once set up, you can trigger the snackbar from any component by simply executing the following code

// views/Home.vue
this.$store.dispatch('showSnack', {
   message: 'Testing, main page.',
   color: 'green darken-1'
})

// views/About.vue
this.$store.dispatch('showSnack', {
   message: 'Hello from about!',
   color: 'red darken-1',
   timer: 2000
})

Tips for making a versatile Vuetify Snackbar that can be used multiple times

Answer №1

Answer №2

Similar questions

What is the best way to increase the row spacing in an Ant Design Table?

What is the best way to include basic static files and HTML together in a NodeJS environment?

Encountered a header error while attempting to proceed with the

Error: export keyword used incorrectly

Transform the Vue.js component into a Webpack component

Tracking in node.js to detect the creation of a new file

Having a minor problem in attempting to retrieve a random value

Implement dynamic message based on user interaction using v-on:click in Vue

Different ways to incorporate a property within fabric items

Is there a way to handle an error or display N/A when an object is not found in the JSON data I am working with?

Developing web applications using a combination of PHP, MySQL, and

Exploring the World of JSON Nested Arrays with Unknown Titles and Organizing Them for Storage

Tips for providing support to a website without an internet connection

Is there a way to automatically refresh a webpage whenever there are changes

Emulating an Ajax request

How big should the placeholder image be for the image area?

Send a PUT request using Ajax

How can I switch the data source in JavaScript when a dropdown is clicked?

Using JQuery to enable checkbox if another is selected

Exploring the power of Angular JS promises through ng-repeat