Reputation: 359
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
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