Vue.js：带有多个条件的 <form> 内联 if-else 语句答案

【问题标题】：Vue.js: Inline if-else statement inside <form> with multiple conditionsVue.js：带有多个条件的 <form> 内联 if-else 语句
【发布时间】：2019-07-23 11:13:19
【问题描述】：

有没有办法在 Vue 中制作具有多个条件的内联 if-else 语句？

我在 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>

但是，我还有另一个布尔变量 queryMode。所以，我还想在执行方法之前检查它的值。更多类似这样的嵌套语句：

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

我搜索了v-if、v-else-if 和v-else，但我不知道如何将它们集成到我当前的代码结构中。

【问题讨论】：

为什么不只使用一个处理程序方法而不是包含与您在问题中发布的if/else 结构非常相似的代码？您可以使用嵌套的三元组使事情变得难以阅读，但似乎没有必要将所有这些内联。
我试图这样做.. editMode 和 queryMode 变量被声明为返回变量，默认情况下为 false。但是当我在一个方法中 console.log 他们的当前值时，它根本不会记录任何东西。我做错了吗？

标签： if-statement vue.js nested conditional-statements

【解决方案1】：

我会有一个处理程序：

<form @submit.prevent="onSubmit">

与：

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

理论上，您可以将其全部内联，但很难阅读：

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

你可以放一些括号，但这不会更好。

【讨论】：

哦不！现在我知道为什么单个处理程序方法不起作用了。我忘了执行npm run watch。我知道有些奇怪。哈哈！现在一切正常！