Bagaimana untuk menetapkan input nilai sesi dalam Vue.js
P粉147045274
P粉147045274 2023-08-25 21:15:59
0
1
515
<p>我有一个Vue.js的表单过滤器:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>我有一个<kod>kaedah</kod>来获取输入和选择的值:</p> <pre class="brush:php;toolbar:false;">kaedah: { changeFilter() { console.log(nama.ini, ini.jantina) }, },</pre> <p>现在我想重新加载页面,但输入框或选择框仍然显示我选择的值。请帮帮小
P粉147045274
P粉147045274

membalas semua(1)
P粉885035114

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan