Vue2からVue3に書き換える上で、Vuetifyのv-text-fieldの実装で少し学びがあったので書き記しておきます。
環境
- Vue：3.4.15
- Nuxt.js：3.9.3
- Vuetify：3.5.1
やりたいこと
v-text-fieldでやりたいことは以下です。
- 値が変更されたとき、関数を実行する。
- 引数に任意の値を渡す。
- 引数に変更された値を渡す。
v-text-fieldで値変更時に関数を実行するには、v-onディレクティブとして、update:model-valueに関数を指定してあげればOKです。
ここまでは公式ドキュメントですぐに分かります。
第1引数に変更後の値が渡されるので、「@update:model-value=”onChangeText”」のように関数に括弧をつけずに渡してあげれば、1,3だけであれば簡単に実装することができます。
しかし、1,2,3を同時に実現したい場合どうすりゃいいんだと。
こうするとできました。
<template v-for=”(item, idx) in items” :key=”`text-field-${idx}`”>
<v-text-field
v-model=”item.name”
:error-messages=”item.errMsg”
:label=”`${idx * 1 + 1}個目`”
@update:model-value=”onChangeText(idx, $event)”
@keyup.enter.exact=”clickSearchBtn”
/>
</template>
<script setup lang=”ts”>
interface Items {
name: string,
errMsg: string
}
const items = ref<Items[]>([
{ name: ”, errMsg: ” },
{ name: ”, errMsg: ” }
])
const onChangeText = (idx: number, val: string) => {
// idxを参照できる
// 変更後の値(val)を確認できる
}
</script>
なんで$eventで値受け取れるんや……。
v-on:clickでマウスイベント拾う時とかによく$eventは使いますが、ダメ元でやってみてうまくいったのが謎です。
まぁ、一旦いっか…。（別にこの実装使わないし。）
The following two tabs change content below.
入会申込
ログイン
