<p>Vue 3 でフォーム コンポーネントを作成し、双方向バインディングと過去の作品での Vue の動作についての理解に基づいて、参照オブジェクトを入力要素にバインドしようとしています。何らかの変更が予想されます。 「onChange」リアクティブ イベントをトリガーすることで、React コンポーネントで行う必要があるような操作を行わなくても、即時オブジェクトへの参照に影響します。 </p>
<p>しかし、[保存] ボタンをクリックして参照オブジェクトを出力する関数をトリガーすると、最初にロードされた値のみが保持され、入力に加えた変更は保持されないようです。誰か理由を説明できますか? </p>
<p>これは私のコンポーネントのコードです。ポップアップウィンドウにロードされます。</p>
<pre class="brush:php;toolbar:false;"><スクリプト セットアップ lang="ts">
タイプ {アクティビティ} を '@/models/activity' からインポートします。
「vue」から { ref } をインポートします。
'../../common/Button.vue' からボタンをインポートします。
定義エミッツ([
「近い形」
]);
const props =defineProps<{
タイトル?: 文字列、
アクティビティ?: アクティビティ、
編集モード: ブール値
}>();
const 初期状態 = props.activity ?? {
ID: ''、
タイトル： ''、
カテゴリー： ''、
説明： ''、
日付： ''、
市： ''、
会場： ''
}
const currActivity = ref
(initialState);
const handleSubmit = () => {
console.log(currActivity.value);
}
// const handleInputChange = (event: イベント) => {
// const {name, value} =event.target as HTMLInputElement;
// console.log(名前, 値);
// // currActivity.value[名前] = 値;
// }
</スクリプト>
<テンプレート>
<フォーム
class="グリッド グリッド-列-5 ギャップ-4 mb-8"
@submit="ハンドル送信"
autocomplete="オフ"
>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
双方向バインディングには、
リーリー:valueの代わりにv-modelを使用する必要があります: