#javascript #vue.js #vuetify.js
#javascript #vue.js #vuetify.js
Вопрос:
У меня есть компонент v-alert, который отобразит / закроет базу в магазине Vuex — он установит ошибку — и очистит ее через 4s!
И вот мой компонент V-alert:
Проблема в том, что оно :value
не работает, когда getError
становится null
Если я хочу, чтобы мое V-оповещение исчезло, когда getError
есть null
, я должен использовать v-if
Мой обходной путь в порядке, но я все еще путаю :value
здесь
Есть ли ошибка или я где-то ошибаюсь?
<template>
<v-alert
:value ="!!getError" // <~~~ Problem 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>
Вот мой магазин — он установит ошибку — и очистит ее через 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,
};
Комментарии:
1. Это должно работать нормально. Смотрите мой codesandbox на codesandbox.io/s/optimistic-carson-b838t
2. @User28 спасибо за ваше время и ваш код, я попытаюсь выяснить, что произошло с моим кодом, а также благодарю вас за идею написания фрагмента кода в Codesanbox для отладки, я буду использовать его в будущем,
Ответ №1:
Большое спасибо @User28 за его / ее ценный рабочий фрагмент кода, это помогает мне сравнить и выяснить, что случилось с моим глупым кодом,
Оказывается, когда ошибка была удалена в хранилище, это сделало state.error = null;
а затем допускает ошибки :type="getError.type"
и getError.message
, потому что :
[Предупреждение Vue]: Ошибка при рендеринге: «TypeError: не удается прочитать свойство ‘type’, равное null»
[Предупреждение Vue]: Ошибка при рендеринге: «TypeError: не удается прочитать свойство ‘message’ неопределенного»
Я могу изменить хранилище таким образом, чтобы исправить ошибку:
const state = () => ({
error: {
message: undefined,
type: undefined,
},
});
// ...
const mutations = {
// ...
[REMOVE_ERROR]: (state) => {
state.error = {
message: undefined,
type: undefined,
};
},
};
...