Vue:选择下拉列表在更改值时清除其他输入 [英] Vue: Select dropdown is clearing other inputs when changing value
问题描述
我有一个带有输入值的表单.当我有一个带有 v-model 的选择并去更改下拉值时，先前字段的输入会清除.我做了一个简单的代码笔来演示这一点.一段时间以来，这一直是我的痛点，但现在它开始干扰客户体验，所以我想看看为什么会发生这种情况.
https://codepen.io/lorvenji9533/pen/VwvVBMV
<div id="应用程序"><输入></输入><select v-model="foo"><option value="volvo">沃尔沃</option><option value="saab">Saab</option><option value="mercedes">梅赛德斯</option><option value="audi">奥迪</option></选择></模板><脚本>导出默认{数据() {返回 {富:"};}}
我也遇到了同样的问题，对我来说问题是我把文本输入的值保存在了一个prop里，但是应该保存在data里方法.
所以元素看起来像:
然后在脚本部分结束:
data() {返回 {价值: ''}}I have a form with input values. When I have a select with a v-model on it and go to change the drop down value, the input from the previous fields clear. I made a simple codepen to demonstrate this. It's been a pain point for me for a while but now it's starting to interfere with customer experience so I'd like to see why this happens.
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>
I had the same problem, and for me the problem was that I saved the value of the text input in a prop, but it should be saved in the data method.
So the element looks like:
<input v-model="value"/>
End then in the script part:
data() {
return {
value: ''
}
}
这篇关于Vue:选择下拉列表在更改值时清除其他输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
