在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输入表单中的值