What is the best way to simultaneously check two conditions in Vue.js?

In my current scenario, I am facing a challenge with checking both conditions simultaneously. If an attachment exists in the request but the attachment field does not exist in the form, it should display a message in the modal. Similarly, if body text exists in the request but the rich text field does not exist in the form, it should show an error.

However, when an attachment exists in the request and the attachment field also exists, the code moves to the else if statement. But if the rich text field is missing in the form, it doesn't show an error because the nested if statement is not executed. I am unsure of how to address both conditions at the same time.

 if (this.selectedForm) {
    let attachmentField = this.selectedForm.formFields.filter(formField => {
      return formField.fieldAttributeType == 'attachment'
    })
    let descriptionField = this.selectedForm.formFields.filter(formField =>{
      return formField.fieldAttributeType == 'rich_text'
    })
    debugger
    if (this.request.attachments.length > 0 && attachmentField.length == 0) {
      debugger
      this.missingFields.push("Attachment field does't exist in custom form");
      if (this.request.bodyText.length > 0 && descriptionField.length == 0) {
        this.missingFields.push("and Rich_text field does't exist in custom form");
      }
      this.$refs.ticketCreationConfirmation.open();
    } else if (this.missingFields.length == 0){
      this.addRequest(this.request);     
    }
  }

Answer №1

if (this.selectedForm) {
    let attachmentField = this.selectedForm.formFields.filter(formField => {
        return formField.fieldAttributeType == 'attachment'
    })

    let descriptionField = this.selectedForm.formFields.filter(formField => {
        return formField.fieldAttributeType == 'rich_text'
    })

    if (this.request.attachments.length > 0 && attachmentField.length == 0) {
        this.missingFields.push("Attachment field doesn't exist in custom form");
    }

    if (this.request.bodyText.length > 0 && descriptionField.length == 0) {
        this.missingFields.push("Rich_text field doesn't exist in custom form");
    }

    if (this.missingFields.length > 0) {
        this.$refs.ticketCreationConfirmation.open();
    } else {
        this.addRequest(this.request);     
    }
  }

If you wish to display the error messages joined with "and", use the following code:

this.missingFields.join(" and ");

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

children blocking clicks on their parents' divs

I previously asked a question about a parent div not responding to click events because its children were blocking it. Unfortunately, I couldn't recreate the issue without sharing a lot of code, which I didn't want to do. However, since I am stil ...

Unable to set $_POST value when using $.ajax post request

I am a beginner in the world of PHP and JavaScript, and I have encountered an issue where I need to make changes to values in an XML document that has been read in. Specifically, I have an HTML Select element that was dynamically generated by PHP code. fu ...

I am unsure how this type of jQuery AJAX data : () will be interpreted

I'm not a beginner nor an expert in jQuery. I'm modifying a jQuery code for opencard checkout section. There is a Javascript file in this section that sends data to the server. I came across an AJAX request with data structured like this: url: ...

Display a smaller image preview in the product photo gallery

Hey there! I'm currently working on a website and looking to showcase my product in a similar way as shown here: I would like my main image to be displayed with all the other variants of the product image underneath, along with the same visual effect ...

Issue: (SystemJS) XHR error (404) encountered in Angular2 Plnkrsandbox

The issue: https://i.sstatic.net/jUKBU.png https://plnkr.co/edit/910M73kwYKc8xPlSIU57?p=preview index <!DOCTYPE html> <html> <head> <base href="/"> <title>Angular 2.1.2 + TypeScript Starter Kit</title> <met ...

Is there a way to include custom headers in the response of socket.io using express.js?

I have been attempting to override the CORS policy using the following code block: app.use('/\*', function (req, res, next) { res.header("Access-Control-Allow-Origin","*") res.header("Access-Control-Allow-Hea ...

Angular - Brilliant time selection tool (BTS) The TimePicker feature fails to automatically switch to selecting minutes after choosing the hour

I'm currently implementing the Amazing time picker in my app and I'm facing an issue where it doesn't automatically switch to minutes after selecting the hour. component.html <input type="time" atp-time-picker formControlName="time" cla ...

Modify the hyperlink address in the body of the webpage using jQuery

I'm searching for a solution to modify the href attribute in the following code: <link rel="stylesheet" type="text/css" href="theme1.css"> For instance, changing it from: <link rel="stylesheet" type="text/css" href="theme1.css"> to: & ...

Display or conceal elements in a v-for select input by leveraging the value of another input with Vue3

In my form, I have two dropdown select option fields generated using loops from predefined constants. One dropdown is for selecting different "sides" and the other for choosing various "caps". When a user selects "2-Sided" in the sides dropdown, I want t ...

Engaging in payment processing

Currently facing a significant dilemma. I am utilizing Stripe as my payment gateway, which functions in a two-step process: Collect billing information to generate a token Charge the client using the generated token The issue arises because the token ca ...

Vue Js: Creating an array of checkboxes

I have a collection of checkboxes sourced from the main system object where I store all system settings (referred to as getSystem{}). Within this form, I am retrieving information about a User, who possesses an array of roles []. How can I cross-reference ...

Modify CSS class if user is using Internet Explorer version 10 or above

I am attempting to modify the CSS of 2 ASP controls using jQuery specifically for users accessing the site with Internet Explorer 10 or 11. This adjustment is necessary because IE10 onwards, conditional comments are no longer supported. My approach to achi ...

The last value label in Google Charts bar chart getting cut off

I've searched extensively for a solution to this issue regarding the haxis labels, but I have not been able to find one that addresses it... In the image provided below, you'll observe that the last percentage label on the horizontal axis is mis ...

Is it possible to define a state within a map function?

This section of my code retrieves JSON data from the backend API and displays it as a list. Here is an example of my JSON data: (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {id: 1, t ...

Fastify route handler failing to start after onRequest hook is executed

I am currently working on a fastify application that needs to capture the raw body of post requests for authentication purposes. After extensive research, I discovered that fastify does not have native support for this feature. The solutions I found online ...

Add a parameter to the iframe that is dynamically loaded into the DOM after a user clicks on

I am attempting to automatically play a YouTube video within an iframe. The iframe is only loaded into the DOM when I activate a trigger element: a.colorbox.cboxElement How can I add the parameter ?autoplay=1 to the end of the iframe URL upon click, consi ...

Customize arrow direction in AntDVue ant-collapse using simple CSS styling

Is there a way to customize the arrow directions in ant-collapse vue? I recently faced an issue where I couldn't change the arrow directions without using !important (which I try to avoid). Fortunately, we found a workaround for this problem at my wo ...

How can I include a JSON object in an angularjs $scope variable?

How can I effectively inject my JSON Object into my angular $scope during the create() function? Sample HTML: <input type="text" class="title" placeholder="hold" ng-model="formData.text"/> <input type="text" class="desc" placeholder="description ...

"Implementing a dynamic loading effect in Highcharts triggered by a button

Take a look at this sample highchart fiddle: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-setdata/ $('#button').click(function () { var chart = $('#containe ...

JQUERY function fails to execute following the invocation of an array

There is an array named NAME being created. Weirdly, the code seems to be functioning fine for alert('test1') but encounters an issue when reaching alert('test2') $(document).on('submit','form',function() { ...