Как вставить данные из определенного объекта store vuex?

Question

[LehaRybkoha]

Опишу ситуацию. У меня есть некая локальная "база данных" db.json. Она хранит информацию в объектах о нескольких полях формы(к примеру текст лейбла, id и др). Мне нужно из компонента достать данные определенного объекта и вставить их на странице.
К примеру в db.json есть объект:

"cardNumber": {
      "id": "v-card-number",
      "label": "Номер карты",
      "errorLabel": "Неверный номер карты",
      "helpText": "",
      "isShow": true
    },

Мне нужно обратиться к store и достать к примеру label, таким образом: cardNumber.label.
Что я сделал. Я настроил store, vuex, добавил в определенный компонент геттер, назовем его FIELDS.
Далее я к примеру в теге span хочу вывести эти данные:
<span>{{ FIELDS.cardNumber.label }}<span/>

И да, они выводятся, НО... Появляется ошибка:
[Vue warn]: Error in render: "TypeError: Cannot read property 'label' of undefined"

Причём текст выводится и остаётся, но сразу после появляется эта ошибка, как её решить?
Я предполагаю, что сами данные из стора приходят после того как отрендерится страница, из-за чего на этапе рендера Vue не может найти нужные мне данные и выкидывает ошибку, но вероятно я ошибаюсь, а если нет, то как можно с этим справиться?

Можно было бы выводить данные как:
<li v-for="field in FIELDS"><li/>
И далее вставлять нужные данные, но так я сделать не могу.
Спасибо!

Comments

[Gimir]

Может добавить дополнительную проверку?

<span>{{ FIELDS.cardNumber && FIELDS.cardNumber.label }}<span/>

Answer 1

[LehaRybkoha]

В общем сделал иначе. В data компонента прописал объект fields с объектами полей(к примеру
data() { fields: { phone: {}, email:{} и тд }}). В watch сделал следующее:

FIELDS (data) {
                this.fields.email = data.fields.email 
                //И так для каждого поля далее....
            }

А после просто вставлял:

<span>{{ fields.email.label }}</span>
<-- и так далее... -->

Таким образом ошибок нет