Vueでボタンの活性・非活性をcomputedの監視で操作してみた

最近Vue.jsを使ってWebサービスのUIを整えているのだが、中々computedを使う意味と要素の「依存関係」が理解できていなかった。

しかし、上記を覚えることでよりVueが便利なものだと認識できたので、今回はフォームの入力がされたら、送信ボタンのdisabledを解除する方法を解説していく。

フォーム入力を準備

まずはHTMLの準備を行う。

フォーム入力とデータを繋げるため、入力用inputにはv-model、送信ボタンには属性操作に使うv-bindを書いていく。

    <form action="function/repository.php" method="GET" class="myForm_repository" id="keywordApp">
        <input type="text" name="keyword" placeholder="キーワードを入力" v-model="keyword">
        <input type="submit" class="search_submit" v-bind:disabled="isSubmitDisabled" v-bind:class="buttonClass">
    </form>

Vue.jsで入力があるか否かでsubmitを操作する

このinputで設定したv-model=”keyword”が変更があるかどうかでsubmitボタンを活性化するコードを書いていく。

const keywordApp = Vue.createApp({// Vue.js 3の場合、new Vue{} の代わりにVue.createAppを使用してインスタンスを作る必要があル
    data() {
        return {
            keyword: ""//キーワードの初期値
        };
    },
    computed: {// keywordAppでマウントされた要素の中で変更（ここでは入力）があるかどうかを監視する計算プロパティ
        //isSubmitDisabledメソッドはkeywordと依存関係にあるため、keywordに変更があれば、送信ボタンもVueの機能によって双方向にバインドされるため再評価される
        isSubmitDisabled() {
            return this.keyword.trim() === "";//keywordが空の場合ture（disabled適応）。変更があればcomputedの監視によって自動的にfalseへと再評価
        },
        buttonClass() {
            return {
                act: this.keyword.trim() !== ""//入力値があれば「act」クラス追加
            };
        }
    },
    methods: {

    }
});

keywordApp.mount("#keywordApp");//#keywordAppをマウント

この処理のフローとしては下記の通りだ。

• ①keyword データが変更される（ユーザーが入力を行うなど）。
• ②Vueは isSubmitDisabled を依存関係として検出し、このプロパティを再評価する。
• ③isSubmitDisabled が再評価され、その結果に基づいてSubmitボタンの disabled 属性、クラスが変更される。

computedの依存関係検出により、クリーンなコードで実装できる

通常のJSであれば、イベントリスナーやif文で「inputに入力がされれば～～を変更」というた構文になると思うが、Vueはcomputedプロパティを使うことで、これらを自動で検知して処理してくれる。

computed プロパティは要素の依存関係を自動で検出し、その依存しているデータが変更された場合にのみ再計算することができる仕組みを備えているからだ。

ここでは「v-model=”keyword”」とNOFの切り替えを行う「v-bind:disabled=”isSubmitDisabled”」が依存関係にあると自動的に判断され、入力欄に変更があるとsubmitも再評価され再評価され、false判定（disabled解除）になる仕組みとなっている。

ちなみに、上記は「v-bind:class=”buttonClass”」でクラスもついでにactを追加している。

mesthodの中で処理した場合は依存関係は検出できない

このcomputedで行ったdisabled活性・非活性の処理は、methodの中のkeyInp(){} の中で行っても同じように実装できる。

しかし、computedのように依存関係を自動的に検出することはできないので、コードをよりクリーンで保守しやすくすることは難しくなるのだ。

また、このコードではチェックリストの選択が未実装なので、また後日改めて解説したいと思う。