Eric Sison
Eric Sison

Reputation: 359

Vue.js: Inline if-else statement inside <form> with multiple conditions

Is there a way to make inline if-else statement with multiple conditions in Vue?

I have this code in vue:

<template>
  <div class = "modal-dialog">
    <div class = "modal-header"> <h5>Header</h5></div>
     <div class="modal-body">
       <form @submit.prevent="editMode ? updateParticipant() : addParticipant()">
          /* actual form inside modal body */
       </form>
     </div>
  </div>
</template>

However, I have another boolean variable queryMode. So, I want to also check its value before I execute the methods. More of a nested statement like this:

if(editMode) {
  if(queryMode) { 
     updateParticipant();
  } else {
     //another method
  }
} else {
   addParticipant();
}

I have searched about v-if, v-else-if and v-else, but I don't know how to integrate them in my current code structure.

Upvotes: 0

Views: 3424

Answers (1)

skirtle
skirtle

Reputation: 29092

I would have a single handler:

<form @submit.prevent="onSubmit">

with:

methods: {
  onSubmit () {
    if (this.editMode) {
      if (this.queryMode) { 
        this.updateParticipant();
      } else {
        //another method
      }
    } else {
      this.addParticipant();
    }
  }
}

You could, in theory, write it all inline but it would be difficult to read:

<form @submit.prevent="editMode ? queryMode ? updateParticipant() : anotherMethod() : addParticipant()">

You could put some parentheses in but that wouldn't be much better.

Upvotes: 0

Related Questions