## [[Vue2]]の場合
*[[sync修飾子]]を使った方がキレイに書ける*
[コンポーネントの基本 — Vue\.js](https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86)
- `value`プロパティをつくる
- `@input`イベントを実装する
[[Vuetify]]の`v-autocomplete`をラップした最小構成のコード。内側の`v-autocomplete`では`v-model`を使えないのが大事。
```ts:your-component.vue
<template>
<v-autocomplete :value="value"
@change="handleChange"
:items="items">
</v-autocomplete>
</template>
<script lang="ts">
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
props: {
value: { type: Object as () => string },
},
setup(props, { emit }) {
const handleChange = (newValue: string) => {
emit('input', newValue)
}
return {
items: ["aa", "ii", "uu"],
handleChange,
}
},
})
</script>
```
## [[Vue3]]の場合
[v\-model \| Vue\.js](https://v3.ja.vuejs.org/guide/migration/v-model.html#%E6%A6%82%E8%A6%81)
```html
<Component v-model:hoge="hoge" />
```
```ts
const props = defineProps<{
hoge: string;
}>();
const emit = defineEmits<{
(e: "update:hoge", hoge: string): void;
}>();
const onUpdate = (hoge: string) => {
emit("update:hoge", hoge);
};
```
> [!warning]
> [[Nuxt Bridge]]を使っている場合は動作しないので注意。解決策は[[📝Nuxt Bridgeで複数v-modelを指定するとエラー]]を参照