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

【问题标题】：Vue: Select dropdown is clearing other inputs when changing valueVue：更改值时选择下拉菜单正在清除其他输入
【发布时间】：2020-05-18 04:02:06
【问题描述】：

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

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>

【问题讨论】：

需要查看你使用的vue方法。只给我们 html 并没有多大帮助。
抱歉，刚刚添加
看一下，我无法立即看到任何东西，尽管您也没有显示整个 Vue 组件代码。哪个特定字段正在重置？在您的代码中还提到了哪些地方？您已经尝试过哪种调试方式？
@LannyBose 当我更改下拉值时，所有input 元素都会清除。当下拉值更改时，我尝试抛出一个调试器语句来跟踪流程，但我没有发现任何可疑之处
@LannyBose 这是一个演示 codepen.io/lorvenji9533/pen/VwvVBMV 的代码笔。我认为这是一个简单的事实，在 select 上有一个 v-model 可以做到，但我不明白为什么。

标签： javascript vue.js

【解决方案1】：

我遇到了同样的问题，对我来说问题是我将文本输入的值保存在一个道具中，但它应该保存在数据方法中。

所以元素看起来像：

<input v-model="value"/>

然后在脚本部分结束：

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

【讨论】：