Laravel Array Validation in Vue

I'm trying to output laravel validation errors in Vue. However, I'm having a bad time dealing with the array validations.

In laravel, using a ".*" is possible, like $errors->get('attachments.*').

Is there a way to do this is VanillaJS/Vue?

gych

2 years ago

Level 29

Here is an example

If you for example use a form variable that holds the form data

const form = useForm({
	field1: "",
	field2: "",
});

Your form errors will be reachable with form.errors If you want to get the error from a specific field you can use form.errors.field1

Chron

2 years ago

Level 6

@gych Here's the JSON I'm getting

errors: {
	"user": [ "The user field is required." ],
    "toy.0": [ "Toy #1 must be a string." ]
},

I can access them by calling errors.user, errors["toy.0"]. I'm having trouble with errors["toy.0"] because it could be "toy.6", or "toy.15". I don't want it to be harcoded. Maybe a way to do the $errors->get('toy.*') command in Vue, like errors["toy.*"]?

gych

2 years ago

Level 29

@Chron Ok I see, can you share your template and script I will make an example on how you can do this in vue playground in a bit

gych

2 years ago

Level 29

@Chron Here is an example

Code:

<template>
    <div v-if="errors.user" class="error">{{ errors.user }}</div>

    <div v-for="errorMessage in dynamicToyErrors">
      <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
    </div>

</template>

<script setup>

import { computed } from 'vue';

const errors = {
  "user": "The user field is required.",
  "toy.0": "Toy #1 must be a string.",
  "toy.6": "Toy #7 must be a string.",
  "toy.15": "Toy #16 must be a string."
};

const dynamicToyErrors = computed(() => {
  const dynamicErrors = [];
  for (const field in errors) {
    if (field.includes(".")) {
      const [prefix, index] = field.split(".");
      dynamicErrors.push(errors[field]);
    }
  }
  return dynamicErrors;
});
</script>

Please or to participate in this conversation.