CODEWITHSUNDEEP
vue.jsvue-component
json
json

Reputation: 77

How to set session value input in vuejs

I have a form filter 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>

I have a methods get value input and select :

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

Now I want to reload the page but on input or select still show the value I selected. Help me please. Thanks

Upvotes: 0

Views: 2597

Answers (1)

shaked
shaked

Reputation: 642

Ok, so the first good practice is not to have cangeFilter() like this on click but changeFilter. So If I understand you correctly, you want to reload the page and still have the same value selected for this. You can save the value in the local storage assume that it's not sensitive data.

local storage info Save data in local storage

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

Getting the data (you will need to use a lifecycle hook-like mounted to initialize the data)

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

Upvotes: 1

Related Questions