vuejs中如何设置session值输入

Question

我有一个表单过滤器 vuejs :

       <b-row>
          <b-col md="3">
            <b-form-group>
              <label>Name:</label>
              <b-form-input
                placeholder="Name"
                type="text"
                class="d-inline-block"
                v-model="name"
                v-on:change="changeFilter()"
              />
            </b-form-group>
          </b-col>
          <b-col md="3">
            <label>Gender:</label>
            <v-select
              :options="genderOptions"
              class="w-100"
              v-model="gender"
              v-on:change="changeFilter()"
            />
          </b-col>
      </b-row>

我有一个 methods 获取值输入和 select :

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

现在我想重新加载页面，但输入或 select 仍然显示我 select 编辑的值。请帮帮我。谢谢

Answer 1

好的，所以第一个好的做法是不要像这样在点击时使用 cangeFilter()，而是使用 changeFilter。所以如果我理解正确的话，你想要重新加载页面并且仍然为此选择了相同的值。您可以将该值保存在本地存储中，假设它不是敏感数据。

local storage info 在本地存储中保存数据

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

获取数据（需要使用生命周期挂钩类挂载来初始化数据）

mounted() {
   this.gender = localStorage.getItem('gender') || 'what ever default you have';
}


<b-form-input
            placeholder="Name"
            type="text"
            class="d-inline-block"
            v-model="gender"
            v-on:change="changeFilter"
            :value="gender"
          />

the value in HTML input form

vuejs中如何设置session值输入

How to set session value input in vuejs

vue.js

vue-component