How to set session value input in Vue.js

Question

I have a Vue.js form filter:

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

I have a methods to get the input and selected values:

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

Now I want to reload the page but the input box or select box still shows the value I selected. please help me. Thank you

Answer 1

Okay, so the first good practice is not to use cangeFilter() on the click event, but to use changeFilter. So if I understand you correctly, you want to reload the page and still have the same value selected. You can save this value in local storage, assuming it's not sensitive data.

Local storage information Save data in local storage

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

Get data (you need to use a life cycle hook like mounted to initialize the 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"
          />

Values ​​in HTML input form