利用側ソースコードのイメージ。`course`を`MySelect`の[[v-model]]として割り当てたい。
```ts
import { ref } from "vue";
import MySelect, { type Course } from "./components/MySelect.vue";
const course = ref<Course>({ id: "0000000001", name: "コース1" });
```
```html
<template>
<div>{{ course.name }}</div>
<MySelect v-model:course="course"></MySelect>
</template>
```
## [[defineModel]]を使う
```ts
<script lang="ts" setup>
export interface Course {
id: string;
name: string;
}
const course = defineModel("course");
const courses = [
{ id: "0000000001", name: "コース1" },
{ id: "0000000002", name: "コース2" },
];
</script>
```
```html
<template>
<el-select v-model="course" value-key="id" style="width: 240px">
<el-option
v-for="course in courses"
:key="course.id"
:label="`${course.id}: ${course.name}`"
:value="course"
/>
</el-select>
</template>
```
## [[defineModel]]を使わない
```ts
interface Course {
id: string;
name: string;
}
const props = defineProps<{
course: Course;
}>();
const emit = defineEmits<{
(e: "update:course", course: Course): void;
}>();
const onChange = (course: Course) => {
emit("update:course", course);
};
const courses = [
{ id: "0000000001", name: "コース1" },
{ id: "0000000002", name: "コース2" },
];
```
```html
<template>
<el-select :model-value="props.course" value-key="id" @change="onChange" style="width: 240px">
<el-option
v-for="course in courses"
:key="course.id"
:label="`${course.id}: ${course.name}`"
:value="course"
/>
</el-select>
</template>
```
## MOC
- 📒**関連**
- 📜**アクティビティ**
- 📝**トラブルシューティング**
- [[📝Element PlusのSelect(el-select)でオブジェクトを値にしたとき選択項目が正しく反映されない]]