How to fix missing property in object error in vue component iteration?

Question

Vue.js

The problem in my opinion is very simple, but still I can not solve it, please help me out

In this code, everything is displayed correctly

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

Output:
{ "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 }

But if I write
{{ list.content[i - 1].title }} or {{ list.content.title }}

then I get the error Cannot read property 'title'
of undefined"

Answer 1

But if I write
{{ list.content[i - 1].title }} or {{ list.content.title }}

{{ list.content.title }}
Here's your answer, list.content is an array and doesn't have a title attribute