【Vue.js】Vue.jsでボタンをdisabledして押せなくする方法【:disabled】

【Vue.js】Vue.jsでボタンをdisabledして押せなくする方法【:disabled】

本日はVue.jsを使って、ボタンを押せなくする方法を解説します。

ボタンを押すとdisabledにする

実装は簡単で、ボタンを押したかどうかのフラグを用意しておき、ボタン押下と同時にフラグも書き換えればOKです。
例えば、Testコンポーネント内で上記のような動作を実現してみましょう。
まずはコンポーネント全体です。

<template>
  <div>
	<button v-bind:disabled="isPush" @clikc="pushBtn()">ボタン</button>
  </div>
</template>

<script>
export default {
    name: 'Test',
    data: function () {
        return {
        	/** ボタンを押したかどうか */
            isPush : false,
        }
    },
    methods : {
    	/**
    	 * ボタンを押したらisPushをtrueにします。
    	 */
        pushBtn : function(){
        	this.isPush = true;
        }
    }
}
</script>

データの準備

データにボタンを押したかどうかを保持する「isPush」を用意します。
初期表示時はボタンは押されていないので、isPushはfalseです。

data: function () {
    return {
    	/** ボタンを押したかどうか */
        isPush : false,
    }
}

メソッドの準備

続いて、ボタンを押した時にisPushを変更するためのメソッドを用意します。

methods : {
	/**
	 * ボタンを押したらisPushをtrueにします。
	 */
    pushBtn : function(){
    	this.isPush = true;
    }
}

ボタンの準備

テンプレートで、ボタンを設置します。

<button v-bind:disabled="isPush" @clikc="pushBtn()">ボタン</button>

ボタンを押すと、pushBtnが呼ばれてisPushがtrueになり、isPushがtrueとなった場合に、ボタンがdisabledになります。

以上が、Vue.jsでボタンをdisabledして押せなくする方法でした。