在Vue.js中如何設定會話值輸入
P粉147045274
2023-08-25 21:15:59
<p>我有一個Vue.js的表單過濾器：</p>
<pre class="brush:php;toolbar:false;"><b-row>
<b-col md="3">
<b-form-group>
<label>姓名：</label>
<b-form-input
placeholder="姓名"
type="text"
class="d-inline-block"
v-model="name"
v-on:change="changeFilter()"
/>
</b-form-group>
</b-col>
<b-col md="3">
<label>性別：</label>
<v-select
:options="genderOptions"
class="w-100"
v-model="gender"
v-on:change="changeFilter()"
/>
</b-col>
</b-row></pre>
<p>我有一個<code>methods</code>來取得輸入和選擇的值：</p>
<pre class="brush:php;toolbar:false;">methods: {
changeFilter() {
console.log(this.name, this.gender)
},
},</pre>
<p>現在我想重新載入頁面，但輸入框或選擇框仍然顯示我選擇的值。請幫幫我。謝謝</p>
好的，所以第一個好的做法是不要在點擊事件中使用cangeFilter()，而是使用changeFilter。所以如果我理解你的意思正確，你想重新載入頁面，並且仍然保持相同的值被選中。你可以將這個值保存在本地儲存中，假設它不是敏感資料。
本地儲存資訊 保存資料在本地儲存中
localStorage.setItem('gender', 'Male');取得資料（你需要使用像mounted這樣的生命週期鉤子來初始化資料）
mounted() { this.gender = localStorage.getItem('gender') || '你的默认值'; } <b-form-input placeholder="Name" type="text" class="d-inline-block" v-model="gender" v-on:change="changeFilter" :value="gender" />HTML輸入表單中的值