Bagaimana untuk menetapkan input nilai sesi dalam Vue.js

Question

我有一个Vue.js的表单过滤器：

<b-row>
  <b-col md="3">
    <b-bentuk-kumpulan>
      <label>姓名：</label>
      <b-bentuk-input
        pemegang tempat="姓名"
        type="teks"
        class="d-inline-block"
        v-model="nama"
        v-on:change="changeFilter()"
      />
    </b-form-group>
  </b-col>
  <b-col md="3">
    <label>性别：</label>
    <v-pilih
      :options="genderOptions"
      kelas="w-100"
      v-model="jantina"
      v-on:change="changeFilter()"
    />
  </b-col>
</b-row>

我有一个kaedah来获取输入和选择的值：

kaedah: {
  changeFilter() {
    console.log(nama.ini, ini.jantina)
  },
},

现在我想重新加载页面，但输入框或选择框仍然显示我选择的值。请帮帮小

Answer 1

Baiklah, jadi amalan baik yang pertama ialah tidak menggunakan cangeFilter() pada acara klik, tetapi menggunakan changeFilter. Jadi, jika saya memahami anda dengan betul, anda mahu memuat semula halaman dan masih mempunyai nilai yang sama dipilih. Anda boleh menyimpan nilai ini dalam storan setempat, dengan mengandaikan ia bukan data sensitif.

Maklumat storan setempat Simpan data dalam storan tempatan

localStorage.setItem('gender', 'Male');

Dapatkan data (anda perlu menggunakan cangkuk kitaran hayat seperti dipasang untuk memulakan data)

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

Nilai dalam bentuk input HTML