V警告:当proterty更新时，只显示不关闭的值
V警告:当proterty更新时，只显示不关闭的值
提问于 2020-08-24 03:42:19
我有一个v警报组件将显示/关闭Vuex存储的基础-它将设置错误-并清除它后4s！
这是我的V警报组件：
问题是当:value变成null时，它的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
Stack Overflow用户
回答已采纳
发布于 2020-08-24 10:08:58
非常感谢@User28 28的宝贵工作片段代码，它帮助我比较和了解我的愚蠢代码发生了什么，
结果，当错误在存储中被删除时，它生成了state.error = null;
然后进行:type="getError.type"和getError.message错误，因为：
Vue警告:呈现错误："TypeError:无法读取属性‘类型’的null“Vue警告:呈现中的错误："TypeError:无法读取属性‘消息’的未定义”
我可以这样修改商店来修复bug：
const state = () => ({
error: {
message: undefined,
type: undefined,
},
});
// ...
const mutations = {
// ...
[REMOVE_ERROR]: (state) => {
state.error = {
message: undefined,
type: undefined,
};
},
};
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63554431
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号