Extracting the text from error object (via response) and manipulate or show it in vue template

Question

I am trying to show the errors of the form, I am doing it with an array and I show them with a for each the problem is that it shows me the error but with brackets and quotes.

mutations.js

createUser(state) {
    var url = urlUser
    axios.post(url, {
        id: state.idUser,
        name: state.newUser.name,
        email: state.newUser.email,
        password: state.newUser.password,
        //cant_client: state.newUser.cant_client,
        cant_vehicle: state.newUser.cant_vehicle
        //url: window.location.host + "/acceso/" + md5(state.newUser.password)
    }).then(response => {
        state.newUser = {
            id: '',
            name: '',
            email: '',
            password: '',
            url: ''
        }
        state.errorsLaravel = []
        toastr.success('Usuario generado con éxito')
    }).catch(error => {
        <!-- here -->
        state.errorsLaravel = error.response.data
        <!-- here -->
    })
},

index.vue

<form action="POST" v-on:submit.prevent="createUser">
     <div class="row">
         <div class="form-group col-lg-3">
             <label for="name">Nombre</label>
             <input v-validate="'required|min:4|max:190'"
                    :class="{'input': true, 'is-invalid': errors.has('name') }"
                    type="text"
                    name="name"
                    class="form-control" v-model="newUser.name">
           
              <div v-for="(error, index) in errorsLaravel" class="text-danger" :key="index">
                   <p>{{ error.name }}</p>
              </div>
       
          </div>
          <div class="col-lg-3 mt-2">
             <label></label>
             <button type="submit" class="btn btn-success form-control"><i class="fas fa-plus-square"></i> Guardar</button>
         </div>
    </div>
</form>

show me this way, please your help thanks

Answer 1

Try this.

<div v-for="(error, key) in errorsLaravel" class="text-danger" :key="key">
    <p>{{key}} : {{ error }} : {{ error[0] }}</p>
</div>

This will give you the keys of the errors and error itself that is attached to the key. Also, if you have array of errors that is attached to the specific key you can iterate it as well like I gave an example of index 0 error[0].

In case of inside loop to work with array of erros

<div v-for="(error, key) in errorsLaravel" class="text-danger" :key="key">
    <p v-for="(errorItem, index) in error" :key="index">{{ errorItem }}</p>
    
</div>

Moreover, if you want to put some conditions on the basis of keys , you can use key inside the loop and make your logics.

In case of selective errors that are linked to specific key

<div v-for="(error, key) in errorsLaravel" class="text-danger" :key="key">
    <div v-if="key === 'name'">
    <p v-for="(errorItem, index) in error" :key="index">{{ errorItem }}</p>
    </div>
</div>

Bracket and quotes inside the error means that there can be more than one error that are specified to certain key. That's why errors are in array that are linked to specific key. One key can hold more than one errors

Answer 2

How about you change your template to print

{{ error.name[0] }} Alternatively you could change what you're pushing into state.errorsLaravel. It's hard to tell without seeing the data but perhaps you could push error.response.data[0] and keep the above to simply error.name