After setting up a form with input values, I noticed that when using a select element with a v-model to change the dropdown value, the input fields from the previous selections are cleared. This has been a persistent issue for me and is now starting to impact the overall customer experience. I created a simple codepen to showcase this behavior and would appreciate any insights on why this occurs.
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>