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

Question

我完全迷失了这个，在上面花了5个小时，找不到解决方法。

我有一个API调用，该API提交了一个关于catch错误的操作。然后，该操作会更改状态，该状态是来自catch错误的错误消息，如下所示：

动作

retrieveToken(context, credentials) {
    axiosOne.post('/login', {
    username: credentials.username,
    password: credentials.password,
    })
        .then(response => {

        })
        .catch(error => {
                const errorMessages = error.response.data.errors;
                context.commit('apiErrorMessage', {errorMessages});  <-----
        });
},

变异

apiErrorMessage(state, payload) {
    state.apiErrorMessage = payload.errorMessages;
    console.log(payload.errorMessages);
},

状态

state: {
    apiErrorMessage: {}
},

对象的状态似乎有某种延迟，并且在v-if尝试访问它时仍未定义，从而导致以下错误：

`[Vue warn]: Error in render: "TypeError: Cannot read property '0' of null"`

当对象仍未定义时，使用v-if的最佳方法是什么？

    <transition name="slide-fade">
        <div v-if="apiErrorMessage">
//also tried this  <div v-if="Object.keys(apiErrorMessage).length > 0">
        <b-alert v-for="(value, index) in apiErrorMessage" variant="warning" :key="index">{{ value[0] }}</b-alert>
        </div>
    </transition>

    <script>
        import {
            mapState
        } from 'vuex';

        export default {
            data() {
                return {

                }
            },
            computed: mapState([
                'apiErrorMessage',
            ])
        }
    </script>

谢谢。