Как при перезагрузке страницы сохранить выбранный option?
Всем добрый, помогите пожалуйста решить задачу, нужно чтобы выбранный option сохранялся в select после перезагрузки страницы или редиректе. Мои полномочия закончились на данном этапе, я потратил дни на поиск решения и практику, пока ничего не получается. Код я набросал в песочнице:
https://replit.com/@teplandrey41/SkinnyCadetbluePrinter#src/components/ParentComponent.vue
В проекте select много, я для наглядности вывел один. Все select генерятся в массиве allPanels. Буду невероятно благодарен за помощь!
Ответы (1 шт):
Ошибка в том что ваш компонент BaseSelect не был верно привязан к modelValue, из-за чего возникала данная проблема:
Ваш вариант был следующим:
<select @change="selectChanged"> <!-- Поле select не знает о том что у него уже есть данные -->
<option disabled selected>{{ label }}</option>
<option
v-for="(option, index) in options"
:key="index"
:value="option.value"
:selected="option.value === modelValue"
>
{{ option.text }}
</option>
</select>
И еще одно замечание по следующей строчке кода:
:selected="option.value === modelValue"
Данная проверка не будет корректно работать, так как в localStorage оно у вас хранится как строка (string), а в options как число (number)
В общем, чтобы исправить вашу проблему, нужно всего лишь указать value для поля (в нашем случае select), ну и убрать аттрибут :selected, так как проверять уже на соответствие не нужно, браузер сам автоматически это будет делать исходя от :value самого поля select.
<select :value="modelValue" @change="selectChanged">
<option disabled selected>{{ label }}</option>
<option
v-for="(option, index) in options"
:key="index"
:value="option.value"
>
{{ option.text }}
</option>
</select>