[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

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

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

【応用編：v-text-field との併用】チェックを入れたら入力可能になるテキストフィールドをつくる方法

この記事でご紹介しているのは条件によって押す事ができる様になるボタンについてですが、 v-checkbox と v-text-field を組み合わせて使う事で、「チェックを入れたら入力可能になるテキストフィールド」の様な仕組みもつくる事ができます。その方法に関しては、以下のリンク先の記事で詳しくご紹介しています！
checkboxにcheckを入れたら入力可能になるテキストフィールド3つ[Vue3, Vuetify, VanillaJSそれぞれによる方法]
↑この記事では、Vuetify3 による方法のほか、Vuetify を使わずに Vue.js3 のみでの方法、また、Vuetify も Vue.js も使わずに、素のJavaScriptで実装する方法などもご紹介しています。ぜひあわせてご覧ください！！