我有帶有默認值的 html 輸入元素。我也有下拉元素。問題是當我在輸入中輸入一些值并更改/選擇下拉選項時，輸入值重置為默認值。我如何阻止這種情況發生？
問題在于 v-model，如果我洗掉它，它會按預期的代碼片段作業。
<template>
<label for="name" class=""
>Name
<span class="">*</span>
</label>
<input
type="text"
class=""
placeholder="Name"
:value="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>
看起來問題在于結合v-model和:value
uj5u.com熱心網友回復：
試試這個代碼。
new Vue({
el: "#app",
data() {
return {lights: true,
test:["q","a"],
myValue: '',
defaultName: 'My Name',
optionss:['one', 'two', 'three']
};
}
});
<div id="app">
<input
type="text"
class=""
placeholder="Name"
v-model="defaultName"
/>
<select
v-model="myValue"
class=""
open-direction="bottom"
placeholder="Select" >
</option>
<option v-for="options in optionss" :value="options">{{ options }}</option>
</select>
{{myValue}} {{defaultName}}
</div>
代碼筆 - https://codepen.io/Pratik__007/pen/dyzZZjJ
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344979.html
上一篇：如何更改CSS中的選擇標記位置