javascript - Vue.js - 将一个输入字段与另一个输入字段交换，但保持相同的 v 模型

Question

我有一个选择字段，其中包含预定义值的下拉列表。下拉值之一是“其他”，当用户选择“其他”时，我想将此选择字段与文本字段交换。现在是棘手的部分，因为我想保留选择字段的 v-model 逻辑(通过 ajax 发布数据)，文本字段使用相同的 v-model 。

条件语句工作得很好，问题是输入文本被“其他”(应该是可编辑的)预填充，当我删除这个预填充值时，选择字段会弹出。

相关代码如下:

<b-select
  v-if="experience.position != 'Other'"
  v-model="experience.position"
  v-validate="'required'"
  expanded
  :name="'position' + index"
  placeholder="Select a position">
  <option
    v-for="item in workPositions"
    v-bind:key="item.id"
    :value="item">
    {{ item }}
  </option>
</b-select>
<b-input
  v-if="experience.position == 'Other'"
  v-model="experience.position"
  v-validate="'required'"
  :name="'otherPosition' + index"
  placeholder="Position">
</b-input>

Answer 1

您不能为 select 和 input 使用相同的模型，并且在用户选择“其他”时不使其保持不变。

我的意思是:您可以将其他工作附加在 experience.position 的末尾(other:theotherjob)，并使用 watch 执行一些复杂的技巧和计算。但这会变得不必要的复杂。

我认为您应该有另一个变量，并在提交时将其与原始表单合并。