Laravel11のTextInput.vueがうまく使えない

Question

実現したいこと

TextInput.vueｗに初期値を渡して表示させたいのですが、表示されません。

前提

Laravel11+vue.jsです。

ここに質問の内容を詳しく書いてください。
前述の通り、単にTextInput.vueに初期値を与えて表示したいです。

発生している問題・エラーメッセージ

コンソールに以下のメッセージが出ています。
app.ts:18 [Vue warn]: Missing required prop: "modelValue" 
  at <TextInput defineModel="初期値が入ります" > 
  at <GuestLayout> 
  at <ComponentTest errors= 
{}
 auth= 
{user: null}
 ziggy= 
{url: 'http://127.0.0.1:8000', port: 8000, defaults: Array(0), routes: {…}, location: 'http://127.0.0.1:8000/component-test'}
  ... > 
  at <Inertia initialPage= 
{component: 'ComponentTest', props: {…}, url: '/component-test', version: '4bdca66a1356aeb97458fd51c170b614'}
 initialComponent= 
{__name: 'ComponentTest', __hmrId: 'e7bed9c1', __file: '/Users/yasuo/Herd/rose/resources/js/Pages/ComponentTest.vue', setup: ƒ, render: ƒ, …}
 resolveComponent=fn<r>  ... > 
  at <App>

該当のソースコード

Route::get('/component-test', function () {
    return Inertia::render('ComponentTest');
});

<script setup>
import GuestLayout from '@/Layouts/GuestLayout.vue'
import Label from '@/Components/InputLabel.vue'
import Input from '@/Components/TextInput.vue'
</script>

<template>
<GuestLayout>
  <Label value="件名">タイトル</Label>
  <Input defineModel="初期値が入ります"></Input>
</GuestLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const model = defineModel<string>({ required: true });

const input = ref<HTMLInputElement | null>(null);

onMounted(() => {
    if (input.value?.hasAttribute('autofocus')) {
        input.value?.focus();
    }
});

defineExpose({ focus: () => input.value?.focus() });

</script>

<template>
    <input
        class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm"
        v-model="model"
        ref="input"
    />
</template>

試したこと

chatGPTで聞いてみましたが、要領を得ませんでした。
ちなみに、TextInput.vueは初期状態で、'vue'のところと、defineModelと、defineExposeにVSCode上で赤波線がついています。

補足情報（FW/ツールのバージョンなど）

特にありません。

何卒、ご回答のほどよろしくお願いいたします。

Comments

[juner]

defineModel の使い方勘違いしていませんか？
https://ja.vuejs.org/api/sfc-script-setup#definemodel

`const model = defineModel<string>({ required: true });` で宣言される props は modelValue です。
v-modle="" で bind するものです。

[goola]

コメントありがとうございます。教えて頂いた通り試したところ問題が解決しました！
ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか？

咀嚼して待ってます。

[goola]

マニュアルには「それ以外の場合、props 名はデフォルトで "modelValue" になります。」
ということは、そういうもので、それを知らない人はマニュアルを見なさい。見ない人には分かりませんってことでしょうか？
コードを見て分からないのは手間がかかりますね・・・。
マニュアルを見るクセをつけるとします。

[8524ba23]

解決おめでとうございます！
解決方法をまとめて、「自己解決」として回答してください！
同じように困っている人の貴重な情報になると思います。

[juner]

マニュアルを読まなくても 一応 defineModel のソースにはその記述はありますよ……？
https://github.com/vuejs/core/blob/c9c9dff805e346a88b02a9c5edb386242e49b8f1/packages/runtime-core/src/apiSetupHelpers.ts#L226-L258

[goola]

おはようございます。
この注釈部分なんですかね；・・。
* // default model (consumed via `v-model`)
* const modelValue = defineModel<string>()
* modelValue.value = "hello"
*
* // default model with options
* const modelValue = defineModel<string>({ required: true })
ここまでたどり着くのは私の身の丈にあってないようです。
こういうものもあるんだなと覚えておいて、いずれつかえるようになったら嬉しいです。
ともかく、コメントありがとうございました。

Answer 1

Laravel11でTextInput.vueに初期値を与える場合は、
<Input modelValue="初期値が入ります"></Input>
のように、modelValueを使用します。
マニュアルに記述があります。
https://ja.vuejs.org/api/sfc-script-setup#definemodel