The snackbar closes automatically after 3 seconds. How to set state false after closing of snackbar in vue

Question

I created a Snackbar component using vuetify components and imported that snackbar component to some other component. I am sending props from parent to child snackbar component. The snackbar closes automatically after some time. At this point error is coming like "Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value".

The snackbar closes automatically after 3 seconds. How to set state false after closing of snackbar.

Snackbar component

<v-snackbar 
                :timeout="timeout"
                :color="color"
                :top="y === 'top'"
                :bottom="y === 'bottom'"
                :right="x === 'right'"
                :left="x === 'left'"
                :multi-line="mode === 'multi-line'"
                :vertical="mode === 'vertical'"
                v-model="snackbar"
            >
                {{ text }}
                <v-btn flat color="pink" @click.native="snackbarClose"><v-icon>{{close}}</v-icon></v-btn>
            </v-snackbar>

props

props: ["snackbar", "y", "x", "mode", "timeout", "color", "close", "text", "submit"],

methods in snackbar component

methods: {
        snackbarClose () {
            this.$store.commit("snackbarClose", false)
            // this.$emit('snackbarClose', false)
        }
    }

Parent component

<Snackbar 
            :close="close"
            :snackbar="snackbarBox"
            :y="y"
            :x="x"
            :mode="mode"
            :timeout="timeout"
            :color="snackbarColor"
            :text="snackbarText"
            :submit="text"
        />

data in parent component

data(){
return{
 y: "top",
      x: "right",
      mode: "multi-line",
      timeout: 3000,
      text: "",
      color: "",
      close: "close",
}
}

importing getters in parent component

 ...mapGetters([ "snackbarBox"])

vuex mutations

snackbarClose: (state, payload) => {
        state.snackbarBox = payload
    },

state

snackbarBox: false,

getters

snackbarBox: state => {
        return state.snackbarBox;
    },

How to resolve this?

score 1 · Answer 1 · answered Jul 27 '18 at 12:28

The problem is in this line v-model="snackbar". Snackbar changes value when it disappears, but this value passed as prop to your custom snackbar component.

Try this:

Change v-model="snackbar" to :value="snackbar" and @input="snackbarClose"

Add method input parameter:

methods: {
 snackbarClose(val) {
   this.$store.commit("snackbarClose", val)
 }
}

And on button it should be @click.native="snackbarClose(false)" now.

The snackbar closes automatically after 3 seconds. How to set state false after closing of snackbar in vue

1 Answers1