Invalidating Vue3 setErrors causes issues with defining fields

I have successfully implemented form validation using Vue 3, vee-validate, and yup schema. However, I am facing an issue when trying to validate errors returned from the server, such as a duplicated email. While setting custom error messages like this works fine:

form.value.setErrors({
     email: 'my error message'
 });

I want to be able to loop through my array of errors to display the fields (param) and corresponding error messages (msg). The challenge lies in defining the param dynamically within setErrors () function:

for (const error of errors.response.data.errors) {
  let param = error.param;
  let msg = error.msg;
  form.value.setErrors({
     param: msg
  });
}

My goal is to iterate through "errors.response.data.errors" and use dynamically defined param and msg variables with setErrors ().

Answer №1

The concept of computed property names was first introduced in ES6 (ECMAScript 2015), enabling developers to dynamically calculate the names of object properties within JavaScript's object literal notation.

My code required me to utilize the syntax [param]:msg for this purpose.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing events from Vue to child components

Looking for a way to make clicking on the outer pill element have the same effect as clicking on the checkbox itself? Check out this HTML code that renders these little boxes: https://i.sstatic.net/hspnF.png <div class="token-checkboxes"> <spa ...

How to properly import components and CSS in Vue.js for optimized performance

As a beginner in vue.js, I find one particular concept to be quite confusing. Can someone help clarify the difference between importing a vue.js "component" and a CSS file? For example, when considering bootstrap and vue-bootstrap, do I need both? Just o ...

Coordinating Multiple Angular $http Requests using $q and Managing Errors with $q.catch

Struggling with understanding the correct utilization of Angular's $q and JavaScript's promise API. As a newcomer to Javascript, it's possible I'm making a syntax error. This question appears similar, but isn't an exact duplicate. ...

When it comes to C++, what's the difference between an array of objects and an array of pointers

Let's discuss the advantages and disadvantages of using an array of objects in a C++ class called A. What are your thoughts on utilizing: std::array<A, 10> in contrast to employing an array of pointers like: std::array<A*, 10> ...

The relatedTarget property of the Event object is always set to undefined

Within Bootstrap events, we have access to event.relatedTarget in the various available events. For example, I am utilizing shown.bs.modal. Normally, event.relatedTarget holds the button object from where we click and activate the modal using an onclick ev ...

Encountering connection drops while using AJAX and PHP for Comet implementation on an Apache server

Currently, I am integrating Comet with long-polling AJAX and Apache/PHP. One issue that I have encountered is that if there is a prolonged period of inactivity, meaning no data sent or received, and then an event is triggered after some time, the client- ...

Combining Laravel and Vue: A Guide to Implementing the where() Method in Vue-for

I am working on a project listing feature where each project has its own status. Initially, I tried to list the statuses followed by projects within those statuses. However, this approach displayed all the projects regardless of their status. In Laravel, I ...

Tips for retrieving a value from a JSON file that has been refreshed with AJAX and converting it into a PHP variable

json.php: $array['item1'] = 100; $array['item2'] = 500; echo json_encode($array); javascript: $.getJSON('json.php', function(data) { var value1 = data.item1; var value2 = data.item2; $.ajax({ url: "scr ...

jQuery enables the updating of field values while maintaining the cursor's position within the text

Currently, I am in the process of developing a jQuery plugin for a custom application of mine. One of the functionalities that I am working on involves slugifying a specific field. Below is the code snippet that I have implemented for this purpose: $site ...

How can I merge these two Observables in Angular to create an array of objects?

Let's say we are working with two different datasets: student$ = from([ {id: 1, name: "Alex"}, {id: 2, name: "Marry"}, ]) address$ = from([ {id: 1, location: "Chicago", sid: 1}, {id: 2, location: &qu ...

Incorporate static assets into HTML using Webpack during the compilation process

Feeling a bit stuck at the moment Currently, I have a script that dynamically adds manifest, vendor, and app into the page upon loading. I would like this script to be injected into the HTML during the build process, but it is not required for development ...

Understand which form has been submitted

I have eight Forms in a page (Form0, Form1, Form2 and so forth). Each form, when submitted, sends data to ReassignPreg.php using JavaScript, which then searches for the data in the database and returns it as JSON. The corresponding divs on the page are the ...

Install VueJs and its dependencies using npm within a Laravel project

I recently set up a new instance of Laravel on my system, and I made sure to uninstall and reinstall the latest versions of both nodejs and npm. Despite following all the steps, I'm still encountering issues with running npm install and npm run dev. C ...

Encountering issues with loading tooltips when using Tooltipster alongside ClipboardJS upon clicking

In my project, I am using Bootstrap5, ClipboardJS, JQuery, and Tooltipster. Despite following the initial instructions on the Tooltipster website closely, I am unable to determine what I missed. Here are the two sections, one for the JavaScript scripts an ...

Passing a PHP variable between PHP files with the help of jQuery

I'm facing a minor issue. I'm trying to pass a PHP variable from one PHP file to another using setInterval. However, I'm unsure of how to include the PHP variable in my jQuery code. Here is the content of first.php: <?php $phpvariable= ...

enhancing a node-express-browserify project with jadeify

Unique Context I recently set up a project based on a node-browserify boilerplate example. My development environment is using coffee-script. Currently, I am attempting to integrate jadeify into the setup with the following code: bundle = browserify ...

Using compactMap/map instead of nested loops in Swift to work with arrays within arrays

I need to revamp a method that iterates over an array of arrays using nested loops, and the current implementation is not very Swift-like. The new approach involves utilizing compactMap to flatten the nested arrays and map to generate objects. This is th ...

Tips for setting up NuxtJS build for personalized file paths without needing to adjust router settings

I recently created a single-page application (ssr: false) using NuxtJS. However, after building the project, I noticed that the file paths for the javascript and CSS files are relative to the domain's root folder instead of the dist folder. For exampl ...

Generating new objects from API request in React and aggregating them into a single, comprehensive object

I have developed a program that utilizes Axios to fetch data through API calls. I aim to save the fetched result as an object within my this.state.matrixDictionary variable. However, each time I make another API call, the previous object gets replaced. My ...

Update the text on the button when tasks are in progress in React

I am working on a React project and I need to implement a button that changes its text from Save to Saving... when clicked, and then back to Save once the saving process is complete. My initial approach looks like this: import React from 'react&apos ...