Почему у меня выходит, что не строка пустая после created?

Question

[Руслан Абсалямов]

Делаю axios запрос, в created. Должны данные уже все забиться изначально, но у меня выходит так что данные в объекте еще нет, только идет 3 раз откуда то и данные появляются. Для более подробного сейчас покажу консоль

То объясню что я делаю

<template>
    <div class="transaction row">
        ...
        <div class="col-lg-4">
            <div class="total">Всего {{ accounts.total }} руб {{ total }}</div>
            <div v-for="account in accounts.account">
                <div>{{ account.name }} {{ currency(account.total) }} руб</div>
            </div>
        </div>
    </div>
</template>

<script>
    import RestApi from "@/restApi";
    export default {
        name: "Transaction",
        data(){
            return {
                transactions: [],
                accounts: {}
            }
        },
        methods: {
            currency(sum){
                let strSum = sum.toString();
                return strSum.replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');
            }
        },
        computed: {
          total: function () {
              console.log(this.accounts.total);// Здесь должно вывести сумма вся. 1-ые два выводит undefined, 3 раз нормально все выводит
              let total = this.accounts.total.toString();
              return total.replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');
          }
        },
        created: function () {
            let transaction = new RestApi('transaction.json');
            let account = new RestApi('account.json');
            transaction.list().then(res => {
                this.transactions = res.data;
            });
            account.list().then(res => {
                this.accounts = res.data;//помечаем все данные в accounts, по сути они должны поместиться там и быть уже изначально. то есть включая this.accounts.total тоже
            });
        }
    }
</script>

<style scoped>

</style>

Как мне быть тут, можно типо условием сделать что

if (this.accounts.total) {
                  console.log(this.accounts.total);
                  let total = this.accounts.total.toString();
                  return total.replace(/(\d)(?=(\d{3})+(\D|$))/g, '$1 ');
              }

То все нормально работает, Но мне хочется знать, почему он изначально 2 раза показывает мне undefined и как это можно предотвратить?
Другие данные приходят нормальные, которые как массив. Вот весь ответ который приходит мне

{
  "total": 23000.56,
  "account": [
    {
      "id": 1,
      "name": "Наличные",
      "total": 5000.56,
      "type": 1,
      "currency": 1
    },
    {
      "id": 2,
      "name": "Тинькофф",
      "total": 1200.00,
      "type": 2,
      "currency": 1
    },
    {
      "id": 3,
      "name": "Сбербанк",
      "total": 4253.45,
      "type": 2,
      "currency": 1
    }
  ],
  "spending": {
    "month": 10000.00,
    "sheduled_minth": 10000.00,
    "weekend": 3000.00,
    "today": 200.00,
    "total": 10000.00
  },
  "income": {
    "month": 10000.00,
    "sheduled_minth": 10000.00,
    "weekend": 3000.00,
    "today": 200.00,
    "total": 10000.00
  }
}

Вот примерно в песочнице пример как примерно ошибка выглядит https://codesandbox.io/s/qzmr6lp01j

Answer 1

[Gilfy]

Попробуйте предопределить значение объекта accounts в data() :


https://codesandbox.io/s/8800z1p46l

Скорее всего - данные еще не успели подгрузиться, а шаблон уже начал рендериться и вызвалась функция total. Так как данные еще не пришли, то объект accounts остается пустым (соответственно в нем нет свойства total - поэтому undefined)