Question

我有一个v-alert组件将在Vuex商店上显示/关闭-它会设置错误-并在4秒后清除它！

这是我的V-警报组件：

问题是当sys.exit(1)变成:value时，其getError无法正常工作

如果我想在null为getError时消失我的V-警报，则必须使用null

我的解决方法还可以，但是我仍然对这里的v-if感到困惑

是否有错误或我在某处错了？

:value

这是我的商店-它将设置错误-并在4秒后清除

<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>

Answer 1

非常感谢@ User28提供的宝贵的摘要代码，它可以帮助我比较并弄清楚我的愚蠢代码发生了什么事，

结果是，在商店中删除错误后， state.error = null;

然后由于以下原因而导致:type="getError.type"和getError.message错误：

[Vue警告]：渲染错误：“ TypeError：无法读取null的属性'type'”

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'message'”

我可以像这样更改商店以修复错误：


const state = () => ({
  error: {
    message: undefined,
    type: undefined,
  },
});

// ...


const mutations = {
// ...

  [REMOVE_ERROR]: (state) => {
    state.error = {
      message: undefined,
      type: undefined,
    };
  },
};

...

Vuetify | V-alert：值仅在更新属性时显示未关闭

1 个答案: