駆け出しエンジニアの勉強記録

アラフォー女の未経験すぎる業界での勉強記録

vueの:disabledについて

import PrimaryButton from '@/Components/PrimaryButton.vue';
 
<PrimaryButton :disabled="form.processing">保存する</PrimaryButton>

:disabled="form.processing"
Vue.jsのディレクティブで、この場合は<PrimaryButton>コンポーネントがform.processingの値に応じて有効または無効になるように制御されていることを示している。

ここで、:disabledはVue.jsのバインディングを行うディレクティブであり、form.processingがtrueの場合にボタンを無効にし、falseの場合に有効にする。

これは通常、非同期処理やフォームの送信などの間、ボタンが連続してクリックされることを防ぐために使用され、フォームが処理中(form.processingがtrue)の間はボタンを無効にし、処理が完了すると再度有効にするといった使い方が一般的。