在 v-model 中使用条件运算符？答案

【问题标题】：Using conditional operators in v-model?在 v-model 中使用条件运算符？
【发布时间】：2017-11-09 22:04:54
【问题描述】：

我有一个 vue 组件，它显示了一个表单，其中填充了要编辑的选定项目中的项目。现在我不想使用第二种形式来创建新项目。目前，我使用 v-model 自动填充和更新项目，这显然会更新对象。我不能像这样使用条件运算符吗？

<form @submit.prevent>
  <div class="field">
    <label class="label">Job Title</label>

    <p class="control">
      <input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
    </p>
  </div>
</form>

【问题讨论】：

标签： javascript vuejs2 vue-component

【解决方案1】：

如果你使用 eslint-plugin-vue，它会抱怨 v-model 中的三元。

ESLint：“v-model”指令需要属性值，即作为 LHS 有效。 (vue/valid-v-model)

所以我宁愿明确地使用一对:value 和@input 道具。

这样：

<input 
  type="text" 
  class="input" 
  placeholder="Job title" 
  :value="experiences[editIndex].title ? experiences[editIndex].title : ''"
  @input="experiences[editIndex].title = $event.target.value"
/>

另外，您可以为@input 使用一些函数，它会检查属性是否存在并在必要时添加它。

【讨论】：

【解决方案2】：

您可以将条件运算符与v-model 一起使用，但不能像您在示例中尝试的那样给v-model 一个字符串。

我不会使用相同的表单进行编辑和创建（可能是偏好）。我会让表单成为它自己的组件，然后制作两个额外的表单组件来编辑和创建。

但是，如果您真的想处理每个输入的 v-model 指令中的逻辑，则需要在三元运算符的最后部分给它一个变量。像这样的：

v-model="experiences[i].title ? experiences[i].title : newExperience.title"

【讨论】：