Vue - print array

Question

I have this model files where I have a property that is response that inside has an array errorMessages and inside my Vue component I want to show errors one by one, not in array format.

Is there any way to do it?

    {
  "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>

DobleL · Accepted Answer · 2018-03-07 12:37:14Z

5

you need to iterate over the errorMessages array

<ul v-if="files.length">
  <li v-for="(file, index) in files" :key="file.id">
    <span>{{file.name}}</span> -
    <span v-if="file.error"> 
      <ol>
       <li v-for="err in file.response.errorMessages> {{ err }} </li>
      </ol>
    </span>
  </li>
</ul>

Or use the .join method of the array ( ['hola', 'mundo'].join(", ") => 'hola, mundo')

<span v-if="file.error">{{ file.response.errorMessages.join(", ") }}</span>

answered Mar 7, 2018 at 12:37

DobleL

3,9501 gold badge17 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

edica Over a year ago

Thanxs , this is just I need it.

smchauhan · Accepted Answer · 2021-01-23 10:21:46Z

1

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

answered Jan 23, 2021 at 10:21

smchauhan

294 bronze badges

Collectives™ on Stack Overflow

Vue - print array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related