vue3でとあるフォームを作成。
同意するボタンにチェックが入力された時に送信できる。
やりたいこと
フォームを表示するときに、デフォルトで送信ボタンを非活性（グレーアウト）したい。
同意するにチェックを入れた時に送信ボタンを活性（グレーアウト解除）にする。
CSSで初期値として送信ボタンをグレーアウトするは、別の制御の関係で避けたい。
まず思いついたこと。
vueのライフサイクルを考慮して、mountedで送信ボタンをグレーアウトするようにすればいいのでは？
<template>
<div>
<input type="checkbox" id="agree" value="agree" v-model="agree" />同意する
</div>
<button class="SendBtn" v-on:click="sendActionMethod" :disabled="disabledFlg">送信</button>
</template>
<script>
export default {
props: {
},
data() {
return {
disabledFlg: false,
agree: false,
}
},
watch:{
agree: async function(){
// 送信ボタンを活性にする
}
},
mounted(){
// ↓
// 送信ボタンを非活性（グレーアウト）
},
}
</script>
結果
DOMが有効になっておらず、送信ボタンのDOMが取得できないので、styleを動的に変更できない。
次に
this.$nextTickを使えばDOM更新後に実行されるらしい。
<template>
<div>
<input type="checkbox" id="agree" value="agree" v-model="agree" />同意する
</div>
<button class="SendBtn" v-on:click="sendActionMethod" :disabled="disabledFlg">送信</button>
</template>
<script>
export default {
props: {
},
data() {
return {
disabledFlg: false,
agree: false,
}
},
watch:{
agree: async function(){
// 送信ボタンを活性にする
}
},
mounted() {
// ↓
this.$nextTick(() => {
// 送信ボタンを非活性（グレーアウト）
})
}
}
</script>
やっぱり
状況変わらず。
もうだめだ
考え方を変えて、disableの時にグレーアウトにするだけなので、CSS側で制御するほうが良いのでは？
CSSでボタンがdisabledのときの記述を追加。
<style scoped>
.SendBtn:disabled {
background-color:gray;
}
</style>
できました
無事にグレーアウトしたボタンが表示されました。
結果的にとてもシンプルな解決策でした。