I am struggling to utilize a v-for directive in Vue.js to display the keys of a JavaScript object in a list. Initially, the object is empty but keys and values are populated based on an API call. Here's an example of the data structure (I used JSON.stringify for visualization purposes, but the original object is named fullFileList):
fullFileList{
"8-27.TXT.rtf": {
"textbody": "Lots of text.",
"filetitle": "8-27.TXT.rtf",
"entities": [
{
"name": "Mario Sartori",
"type": "Person"
},
{
"name": "Linda Grey",
"type": "Person"
},
{
"name": "Julia",
"type": "Person"
}
]
},
"8-28.TXT.rtf": {
"textbody": "Also lots of text.",
"filetitle": "8-28.TXT.rtf",
"entities": [
{
"name": "Maine Health Foundation",
"type": "Organization"
},
{
"name": "Grzesiak",
"type": "Person"
},
{
"name": "Jim Williams",
"type": "Person"
}
]
}
}
This is how I initialized Vue:
var vm = new Vue({
el: '#all',
data: {
files: fullFileList
}
})
Here's my HTML code:
<ul id="all" class="nav flex-column nav-pills">
<li v-for="(value,key) in files" >
<a class="nav-link" id="messages-tab" data-toggle="tab" role="tab" aria-controls="messages" aria-selected="false">
{{ key }} </a>
</li>
</ul>
However, no list elements are displaying. What could be causing this issue?
EDIT: To provide more clarity, here is how data is added to the fullFileList object variable:
The initial variable is defined at the beginning of the JavaScript file like so:
fullFileList = {}
New keys and values are added as follows:
basefilename = path.basename(fileNames[loadFile])
fullFileList[basefilename] = {}
fullFileList[basefilename]['textbody'] = result['html']
fullFileList[basefilename]['filetitle'] = basefilename