Как исправить ошибку отсутствия свойства в объекте в переборе компонента vue?

Question

[s_cruze44]

Проблема на мой взгляд очень простая, но все же не могу решить ее, пожалуйста выручайте

В данном коде, все выводится корректно

<li
     v-for="i in 5"
     :key="i"
    >
     <span>
       {{ list.content[i - 1] }}
     </span>
    </li>

Вывод:
{ "id": 1, "title": "Ab1djan", "main": true }
{ "id": 4, "title": "Accra", "main": false }
{ "id": 3, "title": "Adelai9e", "main": false }
{ "id": 15, "title": "Ahm8dabad", "main": false }
{ "id": 6, "title": "Alexandr1a", "main": false }

Но если я напишу
{{ list.content[i - 1].title }} or {{ list.content.title }}

то выводится ошибка Cannot read property 'title'
of undefined"

Comments

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

Почему сразу list.content не перебирать? Зачем это всё?

[s_cruze44]

Алексей Ярков, я перебираю listWords, чтобы забрать вложенные в него объекты, чтобы для каждого списка, отрисовывался блок и в блоке уже по определенным критериям, отрисовывались элементы уже из content
И мне нужно, чтобы только 5 записей отрисовывалось на странице

state: {
    listWords: {
      listA: {
        isPrivate: true,
        content: [
          { id: 1, title: 'Ab1djan', main: true },
          { id: 2, title: 'adana', main: false }
        ],
      }

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

s_cruze44, ну так для этого существуют computed свойства и метод массива slice(0, 4)

Answer 1

[Эдуард]

Но если я напишу
{{ list.content[i - 1].title }} or {{ list.content.title }}

{{ list.content.title }}
Вот Вам и ответ, list.content - массив и у него нет атрибута title