Vue切换下拉选项时input输入值被重置为默认值如何解决？

• 你当前的input仅使用:value做了单向数据绑定，没有同步输入内容到响应式变量：手动输入的内容只存于DOM的value属性中，Vue实例里的defaultName始终保持初始值'My Name'没有更新。
• 下拉框绑定的myValue变化时会触发组件重新渲染，input会按照:value绑定的defaultName初始值重新赋值，就覆盖了你手动输入的内容。
• 移除下拉框的v-model后，myValue不会发生变化，不会触发组件重渲染，input的手动输入内容不会被覆盖，所以看起来功能恢复正常。

两种方案都可以解决该问题，核心是要把输入的内容同步到Vue响应式变量中，避免重渲染时被初始值覆盖：

方案1：给input添加v-model双向绑定（更推荐） #

直接将input的:value="defaultName"替换为v-model="defaultName"，Vue会自动同步输入内容到defaultName变量，重渲染时也会读取更新后的值。
修正后代码片段：

<template>
  <label for="name" class="">
    Name
    <span class="">*</span>
  </label>
  <input
    type="text"
    class=""
    placeholder="Name"
    v-model="defaultName"
  />
  <select
    v-model="myValue"
    class=""
    open-direction="bottom"
    placeholder="Select" >
    <option v-for="option in ['one', 'two', 'three']" v-bind:key="option">
      {{ option }}
    </option>
  </select>
</template>
<script>
export default {
  data: function() {
    return {
      myValue: '',
      defaultName: 'My Name'
    }
  }
}
</script>

方案2：手动绑定input事件同步值 #

如果不想用v-model，可以手动添加input事件更新defaultName：

<input
  type="text"
  class=""
  placeholder="Name"
  :value="defaultName"
  @input="e => defaultName = e.target.value"
/>

内容的提问来源于stack exchange，提问作者pk-n