[Vue.js]チェックを入れる、テキストを入力など条件を満たしたら押せるボタンを作る方法[v-checkbox, v-text-field, v-btn]

v-model, v-bind, computedで押せる条件付きのボタンをつくる

v-btnに条件を指定して、押せる/押せないを制御してみる

Vuetify関連のシリーズの記事、19回目になります。
今回は、UIコンポーネントをただ紹介する感じの記事ではなく、これまで見てきたコンポーネントを組み合わせて、
ほんのすこしだけ応用的な内容を書きたいと思います。

使用するのは
v-btn
v-checkbox
v-text-field
です。

v-text-field は、第6回の記事:

文字数制限を持たせた綺麗なテキストフィールドをVuetifyで簡単に実装する方法[v-text-field]

v-checkbox は、第15回の記事:

Vuetifyでシンプルかつ綺麗なチェックボックスを使用する方法[v-checkbox]

で、どんなコンポーネントなのかを詳しく書いていますので、あわせてご覧ください。

↑v-model, v-bind, computed をつかって、条件を満たしたら押せるようになるボタンをつくってみます。

特定のテキストフィールドに入力しないと押せないボタン

<template>
  <div>
    <v-text-field counter placeholder="入力するとボタンを押せるようになります" v-model="mytext" />
  </div>
  <div>
    <v-btn :disabled="!mytext" color="primary">
      <v-icon>mdi-emoticon-excited-outline</v-icon>
      button
    </v-btn>
  </div>
</template>

まず、「テキスト入力しないと押せないボタン」ですが、
実はとても簡単です。

v-btn には、 disabled という prop があるのですが、
これを指定すると、文字通り入力できない状態になります。
この disabled という prop に、
「v-text-field に v-model で紐づけている data と同じもの」
を、頭に ! をつけて v-bind してあげるだけです。
※なお、 ! の用法については Mozilla によって運営されている Mozilla Web Docs(旧Mozilla Developer Network) 内、次のリンク先のページに詳しい説明があります。 → 論理否定 (!) – JavaScript | MDN

v-btn の disabled という prop
true/false(真偽値)を受け取ることができるので、
条件として渡した mytext に値が入る事で
disabled の条件が false となり、
入力可能な状態になる、というわけです。

この様に、実にシンプルな仕組みで「テキスト入力しないと押せないボタン」がつくれます。

実際に表示してみた「テキスト入力しないと押せないボタン」のサンプル

「テキスト入力しないと押せないボタン」の、実際に動くサンプルを用意してあります。
次のリンクより、ご覧いただけます。
押せるかどうかを制御したボタンのサンプル

特定のチェックボックスにチェックしないと押せないボタン

<template>
  <div>
    <v-checkbox v-model="mycheck" label="チェックを入れるとボタンが押せるようになります" />
  </div>
  <div>
    <v-btn :disabled="!mycheck" color="primary">
      <v-icon>mdi-emoticon-excited-outline</v-icon>
      button
    </v-btn>
  </div>
</template>

こちらも、仕組みはテキストフィールドの場合と全く同じです。

v-checkbox は、チェックを入れるとtrue、はずすとfalseが返ってくるので、
それを
v-btn の disabled という prop に紐づけてあげるだけです。
上で書いた、テキストフィールドの場合の仕組みが理解できれば
簡単につくることができるはずです。

両方の条件を満たさないと押せないボタン

では、テキストフィールド、チェックボックスの両方に入力がないと押せない様にする場合はどうすれば良いでしょう。
その場合は、
computed を使って次の様に指定します。

computed: {
    hasTextAndChecked() {
      return this.mytext && this.mycheck;
    }
  },
...
(中略)

そして、v-btn の disabled という prop に
次の様に v-bind します。

<v-btn :disabled="!hasTextAndChecked" color="primary">
...
(中略)

Vue.js の computed は、算出プロパティと呼ばれるもので、
関連している data が変更された場合に実行される
関数を定義しておくことができる便利な機能です。

ここに
return this.mytext && this.mycheck;
として、&& を使って複数条件を指定することで、
両方の条件を満たせば true が返るようになります。
v-btn の disabled の条件は、!hasTextAndChecked と頭に!がついていて、
true「じゃない時」を指定しているので、
「じゃない時」の逆、つまり true が返ってくれば
disabledの状態が解除されてボタンを押せる様になる、というわけです。

ややこしいですが、
true「じゃない時」 → false
true「じゃない時」の逆 → つまりfalseの逆 → true
ということです。

※なお、 && の用法については Mozilla によって運営されている Mozilla Web Docs(旧Mozilla Developer Network) 内、次のリンク先のページに詳しい説明があります。 → 論理積 (&&) – JavaScript | MDN

両方を満たせば押せる様になるボタンのサンプル

両方を満たせば押せる様になるボタンのサンプルも、先ほどの条件がひとつのサンプルの下に作成してあります。
次のリンクより、確認する事ができます。
押せるかどうかを制御したボタンのサンプル

この記事のまとめ

これまでは、ひたすらVuetifyのUIコンポーネントを紹介する記事を続けてきましたが、
今回は
v-btn
v-checkbox
v-text-field
↑これら3つを組み合わせて、条件を満たした場合に押せる様になるボタンについて、記事を書きました。

今回の例では単純に、true になるか false になるか、
という判定でボタンの disabled を解除する例でしたが、
じつは
computed を上手に使うことで
入力文字の種類を判定させたり、いろいろな制御を行うことも可能です。

そして、今回ご紹介した方法は
Vuetifyでしか使えない方法というわけでもなく
v-model, v-bind, computed
を組み合わせるとどういうことができるか、という部分の
ごくごく簡単な例でもあるので、Vuetifyを使うことができない場面でも役立つかと思います。

UIコンポーネントを紹介する記事以外にも、今回の様に
簡単なサンプルを応用的に書いてみるパターンの記事も、
今後もっと増やしていければと思っています。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。