Vue.js - 将一个输入字段与另一个交换，但保持相同的 v-model答案

【问题标题】：Vue.js - Swap one input field with another but keep the same v-modelVue.js - 将一个输入字段与另一个交换，但保持相同的 v-model
【发布时间】：2019-10-28 20:29:09
【问题描述】：

我有一个带有预定义值下拉列表的选择字段。下拉值之一是Other，当用户选择Other 时，我想将此选择字段与文本字段交换。现在是棘手的部分，因为我想保留选择字段 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>

【问题讨论】：

什么不起作用，您是否尝试将 v-if="experience.position !== 'Other'" 放在 select 上，或者做 v-else？您遇到的唯一问题是切换回来时，模型与选择中的项目不匹配，这可能很难验证其他所需的项目
我已经尝试在选择上使用v-if 并且它可以工作，但是当我删除预填充的“其他”文本时，我得到了选择字段。
是的，当然，它最初也会说“Other”，也许可以改为使用experience.position 上的观察者，或者使用计算值来切换状态。

标签： javascript vue.js

【解决方案1】：

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

我的意思是：您可以在experience.position（其他：theotherjob）的末尾附加其他工作，并使用watch 和computed 做一些复杂的技巧。但这会不必要地复杂。

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

【讨论】：