[Vue.js]子コンポーネントでv-modelを使う方法

2023年12月14日 22:55

実は普通の方法では実装できないという…

1.<結論>とりあえずこうしましょう

使用しているのは
Vue.js + Typescriptです。
vueファイルを使います。

親コンポーネント↓

<template>
    <!-- main.vue -->
    <!-- 中略 -->
    <textbox-form formName="output file name" v-model="MyValue"/>
    <!-- 中略 -->
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import textboxForm01 from '@/components/form/textbox-form01.vue';
export default defineComponent({
    components:{
        "textbox-form":textboxForm01,
    },
    data() {
        return {
            MyValue:""
        }
    },
})
</script>

子コンポーネント↓

<template>
    <!-- textbox-form01.vue -->
    <!-- 中略 -->
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', (<HTMLInputElement>$event.currentTarget).value)">
    <!-- 中略 -->
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props:{
        modelValue:String
    },
    emits:[
        'update:modelValue'
    ]
})
</script>

Javascriptの方は

<template>
    <!-- textbox-form01.vue -->
    <!-- 中略 -->
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
    <!-- 中略 -->
</template>

<script>
export default {
    props:{
        modelValue:String
    },
    emits:[
        'update:modelValue'
    ]
}
</script>

こんな感じで大丈夫だと思います。

2.これ結構引っかかってる人いそう…

　このことを知った経緯なのですが、最初に子コンポーネントに入力フォームをつけるためにどうしても子コンポーネントにv-modelを付けたかったんですよね。

　なので、実際につけてみたんですよ。

<template>
    <!-- textbox-form01.vue -->
    <!-- 中略 -->
    <input type="text" v-model="modelValue">
    <!-- 中略 -->
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props:{
        modelValue:String
    },
    emits:[
        'update:modelValue'
    ]
})
</script>

　こんな感じで。そしたらですね、なんかちゃんと機能しなかったんですよね。
　なんでなんだろうって思って、Vue.jsの公式サイトで調べたんですよ。

あぁ～子コンポーネントにv-modelは使えないのか～ってなりました。

で、公式サイトを参考にコードを変更しました。

<template>
    <!-- textbox-form01.vue -->
    <!-- 中略 -->
    <input type="text" :value="modelValue" @input="$emit('update:modelValue', (<HTMLInputElement>$event.currentTarget).value)">
    <!-- 中略 -->
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props:{
        modelValue:String
    },
    emits:[
        'update:modelValue'
    ]
})
</script>

　ちなみに、(<HTMLInputElement>$event.currentTarget).value)の部分なのですが、TypeScriptの場合、$event.currentTarget.valueではだめらしいです。
　ちゃんと、$event.currentTargetの部分は型指定をしないとエラーを吐きました。

3.できました～

できたんで寝ます。
ありがとうございました。