Как исправить ошибку «сannot read property of undefined»?

Question

[Aleksandr]

Собственно такой вопрос
Есть JSON файл

{"tableForm": {
    "head": {
        "tr": [
            {
                "th": [
                    {
                        "id": 0,
                        "name": "Опции"
                    },
                    {
                        "id": 1,
                        "name": "Опции1"
                    },
                    {
                        "id": 2,
                        "name": "Опции2"
                    },
                    {
                            "id": 3,
                            "name": "Опции3"
                        }
                ]
            }
        ]
    },
    "body": {
        "tr": [
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "tooltip": "Тут должно быть описание",
                    "name": "text1",
                    "type": "select",
                    "value": "",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": true
                },
                {
                    "check": true
                },
                {
                    "check": false
                }
                ]
            },
            {
                "td": [
                {
                    "id": 1,
                    "label": "Какой-то текст",
                    "name": "text2",
                    "type": "select",
                    "value": "",
                    "tooltip": "Тут должно быть описание 2",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 2,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 3,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": false
                },
                {
                    "check": true
                },
                {
                    "check": true
                }
                ]
            },
            {
                "td": [
                {
                    "id": 2,
                    "label": "Какой-то текст",
                    "tooltip": "Тут должно быть описание 3",
                    "name": "text3",
                    "type": "select",
                    "value": "",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 4,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 5,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": true
                },
                {
                    "check": false
                },
                {
                    "check": true
                }
                ]
            }
        ]
    }
}}

Компонент таблицы

<template>
    <div>
        <table>
            <thead>
                <tr v-for="(item, index) in options.head.tr" :key="index">
                    <th v-for="(item2, index) in item.th" :key="index">
                        {{ item2.name }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in options.body.tr" :key="index">
                    <td v-for="(item2, index) in item.td" :key="index">
                        <el-tooltip class="item" effect="dark" :content="item2.tooltip" placement="right-start">
                            <span>{{ item2.label }}</span><br/>
                        </el-tooltip>
                        <span class="el-icon-check" v-if="item2.check"></span>
                        {{item.value}}
                         <el-select v-if="item2.type == 'select'" :value="item2.value" placeholder="Выберите значение" @change="onInput(item2.name, $event)">
                            <el-option
                            v-for="item in item2.select.fields"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import dropdown from './ui-select.vue';
    export default {
        props: ['options', 'vmodel'],
        components: {
            dropdown
        },
        data() {
            return {
                value4: ''
            }
        },
        methods: {
            onInput(field, value) {
                this.$store.commit('UPDATE_TABLE_VALUE', { field, value })
            }
        }
    }
</script>

Вот вызов компонента

<ui_table :options="getTableFields"></ui_table>
getTableFields() {
    return this.$store.getters.getTableFields
},

getTableFields: state => {
  return state.FIELDS.tableFields
},

При загрузке компонента
Происходит ошибка

"TypeError: Cannot read property 'tr' of undefined"

При этом все отрабатывает. Происходит ошибка из-за того, что геттер отрабатывает два раза и в первый раз он пустой

Подскажите, как исправить?

Answer 1

[0xD34F]

Используйте v-if - пока данных нет, не надо пытаться на их основе ничего рендерить. Как-то так:

<thead v-if="options.head">
...
<tbody v-if="options.body">

Comments

[Aleksandr]

Понял, спасибо!