今回はVue.jsのバインディング機能を使用して、ボタンのdisabled属性を動的に制御していきたいと思います。
イメージは以下の画像の通りです。
実際のコードは以下の通りです。
C:/npm_sample/src/App.vue
<template>
<div id="app">
<button @click="changeMessage" class="messageButton" :disabled="isDisabled">{{ message }}</button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
message: 'Hello',
isDisabled: false,
}
},
methods: {
changeMessage() {
if (this.message === 'Hello') {
this.message = 'Updated message';
this.isOrange = true;
}
this.isDisabled = true;
}
}
}
</script>
<style>
/* 既存のスタイル */
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex; /* Flexboxを使用してレイアウトを調整 */
justify-content: center; /* 横方向に中央寄せ */
align-items: center; /* 縦方向にも中央寄せ */
height: 100vh; /* 親要素の高さをビューポートの高さと同じにする */
}
.messageButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 8px;
}
.messageButton:disabled {
background-color: #e0e0e0;
color: #a0a0a0;
cursor: not-allowed;
}
</style>コードの解説をします。
<template> セクション
<div id="app">...</div>: この部分は、アプリケーションのHTMLマークアップを定義しています。id="app"は、Vueインスタンスにこのdiv要素がアプリケーションのルートであることを示します。<button @click="changeMessage" class="messageButton" :disabled="isDisabled">{{ message }}</button>: このボタンは、ユーザーがクリックしたときにchangeMessageメソッドを実行します（@clickディレクティブを使っています）。class="messageButton"は、ボタンにスタイルを適用します。:disabled="isDisabled"は、isDisabledデータプロパティの値に基づいてボタンが活性化されるか非活性化されるかを動的に決定します。{{ message }}は、ボタンに表示されるテキストで、messageデータプロパティの値を表示します。
<script> セクション
export default { ... }: Vue.jsでコンポーネントを定義する標準的な方法です。ここでは、アプリケーションの動作を定義するオブジェクトが含まれています。name: 'App': コンポーネントの名前を定義します。data() { ... }: コンポーネントのデータを定義する関数です。ここではmessageとisDisabledの2つのデータプロパティを持っており、それぞれがボタンのテキストとボタンの活性/非活性状態を管理します。methods: { ... }: コンポーネントで使用されるメソッドを定義するオブジェクトです。changeMessageメソッドは、ボタンのテキストを更新し、ボタンを非活性にします。
<style> セクション
- ここでは、アプリケーションのスタイリングを定義しています。特に
.messageButtonクラスにスタイルを適用し、さらに.messageButton:disabledセレクタを使用して、ボタンが非活性状態のときのスタイルを定義しています。非活性状態のボタンは背景色が#e0e0e0、テキスト色が#a0a0a0で、カーソルがnot-allowedになることで、ユーザーがクリックできないことを視覚的に示しています。
動作の流れ
- ユーザーがアプリケーションを開くと、Vueインスタンスが生成され、
data関数によって初期状態が設定されます。この時点でボタンは「Hello」と表示され、活性状態です。 - ユーザーがボタンをクリックすると、
changeMessageメソッドが実行されます。このメソッドは、ボタンのテキストを「Updated message」に更新し、ボタンを非活性にします（isDisabledをtrueに設定）。 - 一度非活性になったボタンは、再度クリックできなくなります。これは
:disabled="isDisabled"バインディングによって制御されており、ボタンの見た目は<style>セクションで定義されたスタイルによって変更されます。
コメント