Trying to iterate through an array of objects using v-for, but struggling with the syntax:
<ul>
<li v-for="(data,index) in userStore.links">{{data.link}} - {{index}}</li>
</ul>
Issue: data.link displays nothing and index shows "link" which is confusing. But if I do this instead:
<ul>
<li v-for="data in userStore.links">{{ data[0].link }}</li>
</ul>
Results: google.com <=== This works fine as long as I can increment 0 to 1.
Object Structure:
[ { "_id": "63f3db204ea92c071e2fe24c", "link": "hola.com", "shortLink": "7HG2zM6", "uid": "63e1314aa27f02c4b630c1a6" }, { "_id": "63f3dccb4ea92c071e2fe251", "link": "adios.com", "shortLink": "FsSuAwo", "uid": "63e1314aa27f02c4b630c1a6" }, { "_id": "63f3e1394ea92c071e2fe256", "link": "hola.gg", "shortLink": "0K8aRWz", "uid": "63e1314aa27f02c4b630c1a6" } ]
https://i.sstatic.net/zyYKI.png
https://i.sstatic.net/wAAES.png
Seeking advice on a different approach or how to increment the array index while iterating. Just need to display the entire object. Thank you.
Desired output for the whole array