VueJS, при добавлении option сбивается selected по умолчанию. Как убрать этот эффект?

Question

[Григорий Коваленко]

Мой select:

<select class="form-select" @change="changeSettings('category', item.id, $event)">
                                    <option value="-1" selected>не выбрано</option>
                                    <option v-for="category in categories" :value="category.id"
                                            :selected="GetSelected('category', item.id, category.id)">{{ category.name
                                        }}
                                    </option>
                                </select>

Здесь в GetSelected я проверяю необходимость вернуть selected или возвращаю ' '.
После добавления в select option через Vue, выбранным оказывается последний добавленный элемент, несмотря на то, что всем добавленным элементам в GetSelected я вернул ' '. Я хочу что бы выбранный option остался "не выбрано".

Была попытка решить через @change , чья задача сейчас фиксации выбранного пользователем option, но, как оказалось при добавлении vuejs option в select - @change не вызывается.

Надеюсь, вопрос поставлен понятно, использую vue недавно. Поиск по документации и на других Q&A результата не принес.

Answer 1

[0xD34F]

выбранным оказывается последний добавленный элемент, несмотря на то, что всем добавленным элементам в GetSelected я вернул ' '

Не "несмотря на то", а "потому". Пробел и пустая строка - не одно и то же.

А вообще, ерундой какой-то занимаетесь. Может, стоит освоить использование v-model?

Comments

[Григорий Коваленко]

Пробовал возврат и пустой строки и пробела - это не меняет ситуацию.
v-model не подходит (на сколько я понял из документации) по той причине, что selected у меня присваивается option на основе условий. То есть передаю условия, получаю либо selected либо нет. Использовать методы в v-model не возможно (судя по документации), соответственно использую то, что привожу в примере.

[0xD34F]

Пробовал возврат и пустой строки и пробела - это не меняет ситуацию.

Ну тогда воспроизводите свою ситуацию в песочнице, ссылку сюда. Гадать, какие ещё косяки могут быть, занятие малоперспективное.

[Сергей delphinpro]

Григорий Коваленко,
Атрибут в таком виде

<option selected="">
все равно будет означать что элемент выбран. По сути вы все опции делаете выбранными.

Попробуйте вернуть булево значение false вместо пустой строки, если выбор не требуется.

[0xD34F]

Сергей delphinpro, вот блин, хотел было написать, что привязка значения динамическая, и потому нет разницы между false и пустой строкой... Это так для vue 2, но не для vue 3. Григорий Коваленко, если у вас там третий vue, то да, надо пустые строки на false заменить.

[Григорий Коваленко]

Сергей delphinpro, спасибо, это помогло мне завершить то что я делал! Буду признателен, если добавите ваш комментарий в виде ответа.