How to fix "cannot read property of undefined" error?

Question

Vue.js

Actually such a question
There is a JSON file

{"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
                }
                ]
            }
        ]
    }
}}

Table component

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

Here is the component call

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

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

An error occurs while loading a component

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

At the same time, everything works out. An error occurs due to the fact that the getter works twice and for the first time it is empty

Tell me how to fix it?

Answer 1

Use v-if - while there is no data, you should not try to render anything based on it. Something like this:

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