DEV Community: Joney Spark

How to show Array of errors in Vue.js ? Backend Validation with Laravel Help plz ?

Joney Spark — Fri, 26 Mar 2021 10:15:56 +0000

Hi, I have some complex data and I want to show the validation error array data in vue file but I can not because I have got some data that has index please share your opinion

vue file

<template>
  <div>
    <form enctype="multipart/form-data" @submit.prevent="handleSubmit">
      <div v-for="(contact, index) in contacts" :key="index" class="row">
        <div class="col col-md-3">
          <div class="form-group mb-4">
            <label for="personName">Contact Person Name</label>
            <input
              id="personName"
              v-model="contact.name"
              type="text"
              class="form-control"
            />
            <small> Want to show here the error ? </small
            >
          </div>
        </div>

        <!-- Add or Remove button -->

        <div class="col col-md-12 text-right">
          <div class="row ml-4">
            <div v-show="index == contacts.length - 1">
              <button
                class="btn btn-warning mb-2 mr-2 btn-rounded"
                @click.prevent="add"
              >
                Add More
              </button>
            </div>
            <div v-show="index || (!index && contacts.length > 1)">
              <button
                class="btn btn-danger mb-2 mr-2 btn-rounded"
                @click.prevent="remove"
              >
                Remove
              </button>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contacts: [
        {
          name: "",
        },
      ],

      errors: [],
    };
  },
  methods: {
    handleSubmit() {
      let data = new FormData();
      data.append("contacts", JSON.stringify(this.contacts));

      Request.POST_REQ(data, "/add-institute")
        .then(() => {
          alert("success");
        })
        .catch((err) => {
          this.errors = err.response.data.errors;
        });
    },
    add() {
      this.contacts.push({
        name: "",
        email: "",
        phone: "",
        alternate_phone: "",
      });
    },
    remove(index) {
      this.contacts.splice(index, 1);
    },
  },
};
</script>

controller file


public function add_institute(Request $request) {
  $request['contacts'] = json_decode($request['contacts'], true);
  $request->validate([
      'contacts.*.name'=> 'unique:institute_contact_people|distinct',
  ]);

  ...rest of code of insert 

  return response()->json("Success...");
}

Getting Response data

errors: {
  contacts.0.name: ["The contacts.0.name has already been taken.", "The contacts.0.name field has a duplicate value."]
  0: "The contacts.0.name has already been taken."
  contacts.1.name: ["The contacts.1.name has already been taken.", "The contacts.1.name field has a duplicate value."]
  0: "The contacts.1.name has already been taken."
}

How can I pass multiple data or props using the Router parameter?

Joney Spark — Fri, 11 Sep 2020 16:10:27 +0000

How can I pass multiple data or props using the Router parameter? Then how I can receive the data? Example plz ? in React.js

how to push a array element in a single array object in react.js ? Help Plz

Joney Spark — Sun, 06 Sep 2020 09:45:44 +0000

let {postDetail} = useParams();
    const url = `https://jsonplaceholder.typicode.com/posts/${postDetail}`;
    const [details, setDetails] = useState([]);
    useEffect(()=>{
        fetch(url)
        .then(res => res.json())
        .then(data => {
            setDetails(data => [...data, {"image":`${data.id}`}]);
        })

    },[]);

After Pushing a Array Element in react.js it's looping infinitely in useEffect. Help plz

Joney Spark — Sat, 05 Sep 2020 19:15:22 +0000

I have pushed some image elements in object array it's working fine but how to update the state?

const url = "https://jsonplaceholder.typicode.com/posts";
        const [posts, setPosts] = useState([]);

        const postsMap = posts.map(post => {
            return {...post, "image": `image-${post.id}.jpg`}
        })

        console.log("Added Post Image", postsMap);

        useEffect(()=>{
            fetch(url)
            .then(res => res.json())
            .then(data => {
                setPosts(data)
                console.log(data);
            })

        }, [postsMap]);