Vue：选择下拉菜单在更改值时清除其他输入

我有一个带有输入值的表单。当我选择带有 v-model 的选项并更改下拉值时，之前字段的输入将被清除。我制作了一个简单的代码笔来演示这一点。一段时间以来，这一直是我的痛点，但现在它开始干扰客户体验，所以我想看看为什么会发生这种情况。

https://codepen.io/lorvenji9533/pen/VwvVBMV https://codepen.io/lorvenji9533/pen/VwvVBMV

<template>
  <div id="app">
    <input></input>
      <select v-model="foo">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: ""
    };
  }
}
</script>

我遇到了同样的问题，对我来说问题是我将文本输入的值保存在 prop 中，但它应该保存在 data 方法中。

所以该元素看起来像：

<input v-model="value"/>

然后在脚本部分结束：

data() {
    return {
        value: ''
    }
}