Блог

У меня есть фильтр форм 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 ввод значения get и выберите :

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

Теперь я хочу перезагрузить страницу, но при вводе или выборе все равно отображается выбранное мной значение. Помогите мне, пожалуйста. Спасибо

Итак, первая хорошая практика заключается в том, чтобы не использовать cangeFilter (), как это, при щелчке, а изменить фильтр. Поэтому, если я вас правильно понимаю, вы хотите перезагрузить страницу и при этом выбрать то же значение. Вы можете сохранить значение в локальном хранилище, предположив, что это не конфиденциальные данные.

информация о локальном хранилище Сохранение данных в локальном хранилище

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

значение в форме ввода HTML