El-select почему объединяет данные?

Question

[ettaluni]

Доброго дня! Пытаюсь добавить простой элемент выпадающий список. И он почему то их не выводит нормально. Точнее выводит но они скрыты а в превиов селекта их объединяет.

// Вот данные
divisions: ['asdas', '234234', 'cvbcv'],

// Вот вызов
<el-form-item label="Divisions" prop="division">
                        <el-select v-model="this.divisions" class="w-100 no-hover-bg">
                            <el-option v-for="(dvs, key) in divisions" :key="key" :value="dvs" :label="dvs"/>
                        </el-select>
                    </el-form-item>

Вот как отображается:

При этом в верстке они есть. Но vue их скрывает.

Я не поставил какую то мелочь, может кто то подсказать в чем дело?

Comments

[ettaluni]

tantumus21, Превиов - превиев - это область на скриншоте, там где asdas,234234,cvbcv

Answer 1

[0xD34F]

<el-select v-model="this.divisions"

<el-option v-for="(dvs, key) in divisions"

То есть, одно и то же свойство используется и для создания опций, и для управления значением. Умно.

"Объединяет данные" потому, что значение селекта является строкой, вы указали в качестве значения массив, массив приведённый к строке - это склеенные через запятую его элементы.

Выглядит это так, будто компонент el-option не зарегистрирован.

Comments

[ettaluni]

Я убирал v-model все равно не работает. Примечательно что другая подобная связка работает в другом компоненте.

<el-form-item label="Дивизион" prop="division">
<el-select v-model="model.divisions" class="w-100 no-hover-bg">
<el-option v-for="(dvs,key) in divisions" :key="key" :value="dvs.name" :label="dvs.name"/></el-select>
</el-form-item>

[0xD34F]

Надо не убрать, а указать какое-нибудь другое свойство.

Примечательно что другая подобная связка работает в другом компоненте.

Не примечательно. И "связка" не "подобная". Вам бы документацию vue почитать. И js освоить тоже не помешает.

[ettaluni]

Да я новичок в vue по фронду осталось только этот селект настроить

[ettaluni]

0xD34F, Другое тоже ставил. Например v-model="this.divisionValue" он меняет выбранное значение, спасибо за это. Но пункты выбора в списке все равно не появляются

[0xD34F]

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

[Aetae]

ettaluni, ты упустил последнюю строчку ответа:

el-option не зарегистрирован

[0xD34F]

ты упустил последнюю строчку ответа

Оно дописано позже.

[ettaluni]

я забыл импортнуть Option из element-ui. Ну и в компонентах прописать.
Спасибо всем за участие.