Is Conditional Verification Possible with Vuelidate?

I have a form that is subject to different validations depending on the parameter called action stored in VUEX store. I am attempting the following:

data: function() {
   const validations = {
      sendToProject: {
        cardProject: {
          required,
        },
      },
      recallToBranch: {
        fioReceiver: {
          required,
        }
      }
   }
   return {
     validations,
   }
},
validations() {
  return {
    q: this.validations[this.action]  // supposed to be this.validations['sendToProject']
  }
},
computed: {
  ...mapGetters({
    action: 'action',
  }),
},

Although it functions correctly, it throws an error during bootstrapping:

[Vue warn]: Error in render function: "TypeError: can't convert undefined to object"

This error prevents non-Vue code (such as Bootstrap jQuery plugins initializations) from running.

What's the solution?

Answer №1

Did you give requiredIf a shot in the required validator yet? Here's an example:

validations: {
  someProperty: {
    required: requiredIf(function (xyz) {
      return xyz > 10 && xyz < 20
    })
  }
}

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

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

Creating a unique layout with Bootstrap is a customized design

I am working with Bootstrap version 2.3.2 and I have a specific layout in mind that I would like to implement. Here is what I have so far: My goal is to right-align the "Edit notes" button with the label "Notes." How can I modify the code below to achieve ...

Issues with jQuery AJAX functionality and updating a div with JSON results

I am attempting to retrieve data from a database, convert it to JSON, and then display the results within a div that is updated using AJAX triggered by a form submission button labeled Go! Unfortunately, the code is not functioning as expected, and I am a ...

Tips for effectively utilizing foreach loops in JQuery

I've encountered an issue while displaying a list of data in a table using Smarty templates and foreach loops. I'm trying to make each line clickable to show new data below it, but currently, this functionality only works for the first line. Is t ...

Performing a password-protected JavaScript Ajax request that includes special characters

Within my JavaScript page, I have implemented an Ajax call shown in the code snippet below. The PHP page resides within a corporate intranet that demands domain authentication (without basic auth). To extract the username (u) and password (p), I am using j ...

issue with displaying popover component using React with Material UI

A React component I created has 6 different experiences, each triggering a popover with an array of images. The popovers are implemented using Material UI, and while they work, there are some console errors that I'm unsure how to resolve. Below is th ...

Incorporate fresh data into dropdown options upon selection using Vue3

Can anyone assist me with populating specific input fields on a form using Vue 3? Currently, when a user selects an option from my dropdown menu, all inputs are displayed instead of just the relevant ones. Below is the select dropdown code: <select v- ...

What are the key distinctions between an arrow function, a class, and a traditional function?

Is there a way to distinguish between the following three elements in ES6 using its reference? let x = i => i+1; class y { constructor(i) { this._i=i+1; } get i(){ return this._i;} } function z(i) { return i+1; } For example: test(x) //=> ' ...

JavaScript Issue: Unable to Update or Delete Table Row Data

Presently, I am involved in developing a project titled : Tennis Club Management using a blend of Javascript, HTML, CSS, and Bootstrap. This project encompasses several HTML pages and a JS file such as index.html, profile.html, manageFees.html, index.js, e ...

Using Vue.js, perform calculations on various fields within an array of objects generated by the v-for directive

I am currently learning Vue.js and I have implemented a v-for loop to iterate through an array of objects. However, I now need to calculate a specific field (precoPorKg) within this loop. In order to perform this calculation, the input item.quantidade mus ...

Modifying JavaScript object values using the Object() constructor

My background is in Groovy, which has similar syntax to JavaScript. In Groovy, I can easily copy values from one map to another like this: def myMap1 = {}; def myMap2 = {}; myMap1["key1"] = "value1"; myMap1["key2"] = "value2"; myMap1["key3"] = "value3"; ...

Accessing process.env in Nest.js controllers

Is there a way for me to access process.env.SOME_FIELD in nest.js? app.module.ts ... modules: [ ... ConfigModule.forRoot({ envFilePath: '.env.' + process.env.APP_CODE }), CatModule ... ] ... CatController.ts ...

Get the application/pdf document that was just sent to you from the software backend

I am facing an issue with downloading a PDF file sent from the backend. Upon receiving a blob response, I notice that when I download and view the file, the sheets are empty, matching the expected number of sheets. Could this be a coding problem? Current ...

Displaying the server's response within an AJAX callback (implemented with jQuery)

I am in control of the server endpoint @app.route('/predict', methods=['GET', 'POST', 'OPTIONS']) @crossdomain(origin='*') def predict(): return 'predict12' I am aiming to have the response p ...

Can JavaScript be used to save data to a file on a disk?

As a beginner to intermediate programmer exploring AJAX, I was intrigued while learning about JavaScript. It caught my attention that many examples I have come across incorporate PHP for this task. While some may say 'I'm going about it the wrong ...

The Togglesclass feature isn't functioning properly on my end

I successfully added the code to check for a cookie on my domain. if (document.cookie.indexOf("temp") >= 0) { $(".hideme").toggleClass("hide"); } else { alert("Hey, looks like you don't have a cookie set!"); } Here is the HTML section: < ...

How should one properly assign Vue state (ref()) to one another?

I'm a bit puzzled about how to use ref() in vue 3 (script setup) due to the ref().value. What I'm trying to figure out is whether I should use ref().value = ref().value or ref() = ref(). I have provided an example: <script setup> let stateO ...

Display the greeting "Hello" once the page loads for the first time

I want to display the text "Hello" only on the initial load. If the user closes the window and opens it again, then it should be displayed again. However, if they navigate away from the page and return, it should not be shown. Here is the scenario: Enter ...

Issue: Encounter of "Uncaught (in promise) TypeError" while implementing RiveScript chatbot in Angular

I've been working on integrating a chatbot based on RiveScript into Angular. The chatbot is functioning well - I always see the correct response in the console. Displaying the user's input is also working seamlessly. However, I'm encounterin ...

Following a successful ajax response, the functionality of the JavaScript ceases to operate

Once an Ajax request is successfully sent, the jquery.hover() function no longer works with the new content on the page. Is there a method to refresh the script without reloading the entire div through another ajax request, in order to make it functional ...