Vue js 2 show div only errors have value

Question

I want to show this div only if errors: [] have value

<div v-show="errors.length" class="alert alert-danger">
                            <span v-for="(error, key) in errors" :key="key">
                                <li v-for="(errorItem, errorKey) in error" :key="errorKey" class="text-danger">{{errorItem}}</li>
                            </span>
                        </div>

I have create a validation for my form and polpulate errors: [] array from request i get from backend. But i want to show this div only if i have errors. How can i do this?

methods:{
  //if i request will catch error do this

  .catch(error => {
                    this.errors = error.response.data.errors
}

if errors have value will look like this

errors:Object
  email:Array[1]
  name:Array[1]

DengSihan · Accepted Answer · 2022-11-18 16:25:27Z

1

You may use Object.keys(errors).length instead of errors.length, since errors is an object.

// pervious
<div v-show="errors.length" class="alert alert-danger">

// new
<div v-if="hasErrors" class="alert alert-danger">

computed: {
   hasErrors() {
        return Object.keys(this.errors).length > 0;
   }
}

update:

to enable Toastify() you may add the Object.keys(errors).length in catch

methods: {
    
    .catch(error => {
        this.errors = error.response.data.errors;

        if(Object.keys(error.response.data.errors).length > 0) {
            Toastify({text: error.response.data.message,...})
        }

}

(But I guess you are using requests-sender something like axios, you can add your Toastify() in the axios global interceptor)

update:

For Laravel backend, I recommend you use vform for form validations and alerts.

But if you want to handle this manually, there is a basic login form example:

your Laravel validator may look like below

return [
    'email' => 'required|email',
    'password' => 'required|string|min:8|max:32'
];

your login form via Vue2 Single-File-Component

<template>
    <form
        @submit.prevent="login">


        <input
            name="email"
            type="email"
            v-model="form.email"
            described-by="email-alert"/>
        <p
            v-if="errors.email.length"
            id="email-alert">
            <span
                v-for="error in errors.email"
                v-text="error"/>
        </p>

        <!-- You may combine the `<input/>` and `<p/>` as a Vue-Component -->
        <input
            name="password"
            type="password"
            v-model="form.password"
            described-by="password-alert"/>
        <p
            v-if="errors.password.length"
            id="password-alert">
            <span
                v-for="error in errors.password"
                v-text="error"/>
        </p>


        <button>
            login
        </button>
    </form>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            form: {
                name: '',
                password: '',
            },
            errors: {
                name: [],
                password: [],
            }
        }
    },
    methods: {
        login() {
            axios.post('/authorizations', this.form)
                 .then(() => {
                     // no errors
                 })
                 .catch(error => {
                      this.errors = error.response.data.errors
                 });
        }
    }
}
</script>

edited Nov 18, 2022 at 16:25

answered Nov 18, 2022 at 13:55

DengSihan

3,0862 gold badges23 silver badges51 bronze badges

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

7 Comments

Maison012 Over a year ago

this works. But how about shoowing errors with alert? Toastify({ text: error.response.data.message,

DengSihan Over a year ago

@leoon0012 I've updated the answer, hope it may help you

Maison012 Over a year ago

This show still only one alert. The given data was invalid i want to display for each field, who is required

errors :  {user_id: ["The user id field is required."], name: ["The name field is required."],…} email :  ["The email field is required."] name :  ["The name field is required."]

DengSihan Over a year ago

@leoon0012 It seems like you are using Laravel as you backend?

Maison012 Over a year ago

yes i am using laravel for backend

|

Collectives™ on Stack Overflow

Vue js 2 show div only errors have value

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related