Как исправить ошибку TypeError: Cannot read properties of undefined (reading 'slice') Vue 3?

Question

[Кирилл Красин]

Всё работает, выводится часть массива, но в консоли ошибка:

TypeError: Cannot read properties of undefined (reading 'slice')
    at Proxy.JA (discordSection.vue:21:41)
    at Fe (runtime-core.esm-bundler.js:6322:16)
    at l [as fn] (runtime-core.esm-bundler.js:4997:46)
    at l.run (reactivity.esm-bundler.js:177:19)
    at F.t.update (runtime-core.esm-bundler.js:5128:16)
    at F (runtime-core.esm-bundler.js:5138:5)
    at $ (runtime-core.esm-bundler.js:4906:7)
    at D (runtime-core.esm-bundler.js:4860:9)
    at v (runtime-core.esm-bundler.js:4378:11)
    at L (runtime-core.esm-bundler.js:4610:7)

Строка discordSection.vue:21:

<div v-for="item in discordData.members.slice(-22)" :key="item.id" class="col align-self-center mb-3">

discordData.members:

[
    {
        "id": "0",
        "username": ".† ghøst",
        "discriminator": "0000",
        "avatar": null,
        "status": "dnd",
        "avatar_url": "https://cdn.discordapp.com/widget-avatars/m7broueekGmC8Q25TOcmU4pJVGn_vPxnUFfCWbDdEt0/48QTTlvurZD_QEruB2h3k-DGABje2_L7gdCeCaWmyECYf7LXLSeFfaWdNOyNMNcfDJ1rijT7t-XJ1seoCvrDtF9pMaYzDZ6ZkKIC1V5UUUSdhQrmkeQqsq35jTSBqvZ3O78HTpPGvPWDlg"
    },
    {
        "id": "1",
        "username": "AgtCarl",
        "discriminator": "0000",
        "avatar": null,
        "status": "online",
        "avatar_url": "https://cdn.discordapp.com/widget-avatars/Yim46hrE1WOg2AvEWF9YshsQZzG6D0f5pVSeFop-Xi8/E9QQ4qyhSOyytNgN_Cu5Lit8JguUfZHjtTxcO12GXpTwg-Py2ZWbH6h3B9RzQiOG3zwBzVMqeYYNfefJH16FA49KaqCm2ux2IDFVpOCyRx-cnPoTYso8f2gimR3Nc7r6SmI5WS6_tUD1eA"
    },
    {
        "id": "2",
        "username": "ANdy",
        "discriminator": "0000",
        "avatar": null,
        "status": "online",
        "avatar_url": "https://cdn.discordapp.com/widget-avatars/5jigtjVjr4hE8xipVC2f866MS84-xUdtsbjk7g7S_cE/fyZF7PAjXNQW6ZhZZEeaJcao-sk1Jgv7yftvOta8Go2Zz6pogSePhjYyvHwT3qFCyZvvGbq_vvlekxuploW6d-OfqrA02jmXg8yh9J4wQfdI3qUlrIgYczaBCc0BbKo0yaCtNLby7mmoWw",
        "game": {
            "name": "Rust"
        }
    }
]

Answer 1

[Алексей Ярков]

Ошибка выводится в момент, когда discordData.members равен undefined. Но потом данные подгружаются и всё работает ))

Comments

[Кирилл Красин]

Суть понял, спасибо. Совсем далёкий от vue =(
Если его заранее укоротить до нужной длинны, если правильно понимаю в computed, ошибку я уберу?

[Алексей Ярков]

Кирилл Красин, вы бы лучше показали что такое discordData и как он выглядит ))

[Кирилл Красин]

Алексей Ярков, это вот

[Aleksey Solovyev]

Кирилл Красин, Вы бы ответ Алексей Ярков отметили решением, а не свой, который только после его помощи смогли написать.

Answer 2

[Кирилл Красин]

Ошибку убрал, спасибо Алексей Ярков

computed: {
    slicedMembers() {
        return this.discordData.members ? this.discordData.members.slice(-22) : [];
    }
  },

И соответственно:

<div v-for="item in slicedMembers" :key="item.id" class="col align-self-center mb-3">