在Vue.js中如何設定會話值輸入

Question

我有一個Vue.js的表單過濾器：

<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>

我有一個methods來取得輸入和選擇的值：

methods: {
  changeFilter() {
    console.log(this.name, this.gender)
  },
},

現在我想重新載入頁面，但輸入框或選擇框仍然顯示我選擇的值。請幫幫我。謝謝

Answer 1

好的，所以第一個好的做法是不要在點擊事件中使用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輸入表單中的值