I am working with a model called files, which includes a property named response containing an array called errorMessages. In my Vue component, I am looking for a way to display these errors individually rather than as an array. Is there a solution for this?
{
"files": [
{
"fileObject": true,
"size": 9387,
"name": "file_4444.pdf",
"type": "application/pdf",
"active": false,
"error": true,
"success": true,
"postAction": "http://localhost:8000/api/v1/car/upload",
"timeout": 0,
"file": {},
"el": {
"__vue__": null
},
"response": {
"uploadDone": 0,
"uploadFail": 1,
"errorMessages": [
"User not found",
"Car not found",
]
},
"progress": "100.00",
"speed": 9591,
"data": {},
"headers": {},
"id": "096vnj6rov9t",
"xhr": {}
}
]
}<template>
<div class="example-drag">
<div class="upload">
<ul v-if="files.length">
<li v-for="(file, index) in files" :key="file.id">
<span>{{file.name}}</span> -
<span v-if="file.error"> {{ file.response.errorMessages }} <md-icon>thumb_down</md-icon> </span>
<span v-else-if="file.success">success <md-icon>thumb_up</md-icon> </span>
<span v-else-if="file.active">active <md-icon>thumb_up</md-icon> </span>
<span v-else> ... </span>
</li>
</ul>
...
</template>