How to set session value input in vuejs

Question

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

shaked · Accepted Answer · 2021-07-06 09:21:43Z

1

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

edited Jul 6, 2021 at 9:21

answered Jul 6, 2021 at 7:09

shaked

6429 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

json Over a year ago

Thanks bro. I did as you instructed, but when I reload the page.. it still loses the value displayed on the input ?

shaked Over a year ago

did you ser the item when you click on input (@onChange)

shaked Over a year ago

and make sure you have the value property to initialize the value

json Over a year ago

I do that localStorage.setItem('gender', this.gender);.. but when I refresh the page, it still has no value in the input.. I don't know where did I go wrong? Can you write more clearly for me..Thank you very much.

shaked Over a year ago

Did you add the mounted lifecycle?

|

Collectives™ on Stack Overflow

How to set session value input in vuejs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related