Vue.jsで「変更がないときはdisabledなボタン」を実装する

フォームを作っていると、ユーザビリティ向上のため、何かしら入力内容が変わった時のみ、保存ボタンのdisabledを外したい、という場面があります。
ここではそんな「変更があった時のみactiveになるボタン」を作りましょう。

# 実装デモ
<p data-height="265" data-theme-id="0" data-slug-hash="OBXaQN" data-default-tab="js,result" data-user="chcltn" data-pen-title="Activate Button by Input's Change - flow3" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/OBXaQN/">Activate Button by Input's Change - flow3</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 実装の流れ
1. [inputを並べ、dataを入れておく](#1inputを並べdataを入れておく)
2. [lodashのcloneDeepでオブジェクトをコピーする](#2lodashのclonedeepでオブジェクトをコピーする)
3. [submitボタンのdisabledを切り替える](#3submitボタンのdisabledを切り替える)


## 1.inputを並べ、dataを入れておく
「変更のあった時のみactiveなボタン」は、しばしば何かの編集画面に現れます。

なので、まずはJS側でdataに情報を入れておき、HTML側ではinputを並べてv-modelで値を入れておきましょう。
<p data-height="265" data-theme-id="0" data-slug-hash="PyzXPm" data-default-tab="css,result" data-user="chcltn" data-pen-title="Activate Button by Input's Change - flow1" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/PyzXPm/">Activate Button by Input's Change - flow1</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 2.lodashのcloneDeepでオブジェクトをコピーする

「変更があったら」を検知するため、``user.id``と``user.name``の初期値をどこかに残しておく必要があります。
まずはJS側でdataに空の``pristineUser``というのを用意しておきましょう。

ここに``user``をコピーしたいと思います。
それにはlodash.jsの``cloneDeep``を使いましょう。
lodashはCodePenであればJSの設定画面から簡単にcdnのものを読み込めます。

<img width="526" alt="スクリーンショット 2018-10-05 22.35.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/14819/9924b3fc-fe75-053a-7353-70c68d6d6bf9.png">

lodashが読み込めたら、mount時に ``this.pristineUser = _.cloneDeep(this.user)``　としてコピーしておきます。

<p data-height="265" data-theme-id="0" data-slug-hash="dgXaMV" data-default-tab="html,result" data-user="chcltn" data-pen-title="Activate Button by Input's Change - flow2" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/dgXaMV/">Activate Button by Input's Change - flow2</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 3.submitボタンのdisabledを切り替える

2でコピーした情報をもとに、入力中に差分があったらボタンをdisabledにする処理を入れます。

computed内で``activateSubmit()``という算出プロパティを作り、もしそれぞれの情報に差分があったらtrue、差分がなければfalseを返すようにします。

HTML側でv-bindディレクティブを使い、``:disabled="!activateSubmit"`` とします。

<p data-height="265" data-theme-id="0" data-slug-hash="OBXaQN" data-default-tab="js,result" data-user="chcltn" data-pen-title="Activate Button by Input's Change - flow3" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/OBXaQN/">Activate Button by Input's Change - flow3</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これで、何かしら入力内容が変わった時のみ、保存ボタンのdisabledが外れ、submitできるようになりました。
おつかれさまでした！

---
*※ ここではidとnameが必須項目でない（任意項目である）前提で作成しています。必須項目にしたい場合は、nullでは送信できない処理が別途必要になりますのでご注意ください。*