#ElemenPlus
https://element-plus.org/en-US/component/select.html
すべての項目が正しく設定されているか確認する。
- `el-select`
- v-modelを使っているとき
- `v-model`が設定されている
- `v-model`のオブジェクトにおけるユニークキーとなるプロパティ名が`value-key`に指定されている
- v-modelを使っていないとき
- `model-value`が設定されていること ==(`value` ではないので注意)==
- `el-option`
- `key`が指定されている
- `value`が指定されている
## v-model版
```ts
interface Course {
id: string;
name: string;
}
interface State {
course: Nullable<Course>;
}
const state = reactive<State>({ course: null });
const courses = [
{ id: "0000000001", name: "コース1" },
{ id: "0000000002", name: "コース2" },
];
```
```html
<template>
<el-select v-model="state.course" value-key="id">
<el-option
v-for="course in courses"
:key="course.id"
:label="`${course.id}: ${course.name}`"
:value="course"
/>
</el-select>
</template>
```
## 非v-model版
[[Element PlusのSelect(el-select)をコンポーネント化]]を参照。