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

您可以将条件运算符与v-model一起使用，但是您无法为v-model提供类似于您在示例中尝试的字符串。

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

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

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

Answer 2

如果使用eslint-plugin-vue，它将抱怨v模型中的三元数。

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使用某些函数，该函数将检查属性的存在并在必要时添加它。

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

2 个答案: