I have a v-alert component that appears and disappears based on a Vuex store - it shows an error message and clears it after 4s!
Below is the code for my V-alert component:
The issue I am facing is that the :value attribute does not work when the value of getError becomes null
If I want the V-alert to disappear when the getError is null, I have to use v-if
My workaround works fine, but I am still perplexed about the behavior of :value in this case
Could there be a bug or am I missing something?
<template>
<v-alert
:value ="!!getError" // <~~~ Issue here
transition="scroll-x-transition"
:type="getError.type"
:dismissible="$vuetify.breakpoint.mdAndUp"
dense
:prominent="$vuetify.breakpoint.mdAndUp"
class="TrnAlert rounded-tr-xl rounded-bl-xl text-center text-caption text-md-body-1"
@input="[CLEAR_ERROR]"
>
{{ getError.message }}
</v-alert>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import { CLEAR_ERROR } from '../../store/type/actions';
export default {
computed: {
...mapGetters(['getError']),
},
methods: {
...mapActions([CLEAR_ERROR]),
},
};
</script>
<style scoped></style>
Below is my store which sets an error and clears it after 4s
import { UPDATE_ERROR, REMOVE_ERROR } from '../type/mutations';
import { SET_ERROR, CLEAR_ERROR } from '../type/actions';
const state = () => ({
error: null,
});
const getters = {
getError: (state) => state.error,
};
const actions = {
[SET_ERROR]({ commit }, payload) {
commit(UPDATE_ERROR, payload);
setTimeout(() => {
commit(REMOVE_ERROR);
}, 4000);
},
[CLEAR_ERROR]({ commit }) {
commit(REMOVE_ERROR);
},
};
const mutations = {
[UPDATE_ERROR]: (state, payload) => {
state.error = { message: payload.message, type: payload.type || 'error' };
},
[REMOVE_ERROR]: (state) => {
state.error = null;
},
};
export default {
state,
actions,
mutations,
getters,
};