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

Question

我有一个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>

Answer 1

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

ESLint：'v-model' 指令需要作为 LHS 有效的属性值。(vue/valid-v-model)

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

像那样：

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

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

Answer 2

您可以使用条件运算符v-model,但不能给出v-model类似于您在示例中尝试的字符串.

我不会使用相同的表单进行编辑和创建(可能是首选).我会将表单作为自己的组件,然后再创建两个用于编辑和创建的表单组件.

但是,如果你真的想要处理每个输入v-model指令中的逻辑,你需要在三元运算符的最后部分给它一个变量.像这样的东西:

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