Vue 3 フォームにバインドしているデータが、関数を介してコンソールに印刷するときに更新されないのはなぜですか?
<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="オフ"
>
{{ タイトル }}
</h2>
<入力タイプ="テキスト" placeholder='タイトル' class='col-span-3 mb-4 px-2 py-1 四捨五入' :value="currActivity.title"名前="タイトル" />
<入力タイプ="テキスト" placeholder='Category' class='mb-4 px-2 py-1 丸め' :value="currActivity.category"名前="カテゴリ" />
<textarea placeholder='説明' class='col-span-5 mb-4 px-2 py-1 丸め' :value="currActivity.description";名前="説明" />
<入力タイプ="テキスト" placeholder='日付' class='px-2 py-1 四捨五入' :value="currActivity.date"名前=「日付」 />
<入力タイプ="テキスト" placeholder='City' class='px-2 py-1rounded' :value="currActivity.city"名前=「都市」 />
<入力タイプ="テキスト" placeholder='Venue' class='px-2 py-1rounded' :value="currActivity.venue"名前=「会場」 />
<ボタン
text=「保存」
icon="fa-フロッピーディスク"
type="送信"
@click="handleSubmit"
/>
<ボタン
text="閉じる"
icon="fa-xmark"
type=「キャンセル」
@click="$emit('close-form')"
/>
</div>
<ボタン
text="投稿"
icon="fa-紙飛行機"
type="送信"
@click="handleSubmit"
/>
</div>
</フォーム>
</template></pre>
<p>スクリプト内のコメント化された関数に気づくかもしれません。 React メソッドをコピーし、input 要素の「@change」によってトリガーされる変更イベントを使用して変更を処理してみました。これはうまくいかないようだったので、後で削除しました。コメント機能は残しておきますが、問題を見つけるのに役立つと思う人がいる場合に備えて。 </p>
全員に返信(1)返信します
P粉6098665332023-09-05 10:34:30
双方向バインディングには、:value の代わりに v-model を使用する必要があります:
リーリー
返事
0
キャンセル返事
