【Nuxt.js】ボタンを押したらデータ値をとる＆色が変わる方法

#はじめに
こんにちは！
今回は【Nuxt.js】ボタンを押したら値をとる＆色が変わる方法についてアウトプットしていきます！

#前提
・Nuxtの新規プロジェクト作成が既に済んでいる
・vue.jsの基礎学習が済んでいる
・tailwindcssが扱える

#対象
・真偽値を使用しての開発を学びたい方
・診断アプリケーションを作りたい方

#実装

template

<button class="text-2xl my-6 mx-10 py-6 px-6 border-2 border-red-600 rounded-full h-28 w-28 flex items-center justify-center"
   :class="answers.q1 ? 'bg-red-200' : ''"
   @click="answer('q1',true)">
   YES
  </button>
<button class="text-2xl my-6 mx-10 py-6 px-6 border-2 border-blue-600 rounded-full h-28 w-28 flex items-center justify-center"
   :class="answers.q1 === false ? 'bg-blue-200' : ''"
   @click="answer('q1',false)">
   NO
</button>

script

  data() {
    return {
      answers: {
        q1: null
      },
    };
  },

  methods: {
    answer(questionNumber, bool) {
      this.answers[questionNumber] = bool;
    },
  }

#解説
上記のコード、下記の写真のようにYESとNOのボタンがあります。

・YESを押したらtrueをデータ値としてとる。背景を赤色にする。
・NOを押したらfalseをデータ値としてとる。背景を青色にする。

ということがしたいです。

初期値はnull。からの状態。

##【YESのボタン】
@click="answer('q1',true)"
YESボタンをクリックしたとき、script部分answerにq1はtureというデータ値が入ります。
それをthis.answers[questionNumber] = bool;と記述し、q1＝trueと処理が働き、決定付けられます。

:class="answers.q1 ? 'bg-red-200' : ''"
この記述の'bg-red-200' : ''この部分は'左辺（tureの時）' : 右辺（falseの時）という意味になります。よって全体を訳すとYESボタンを押すとデータ値にtrueが入る。answers.q1のデータ値がtrueの時YESボタンの背景カラーは赤色に変わるという意味になり、処理が実行されている。

##【NOのボタン】

まず最初に、初期値はnullとお話ししました。boolにnullと定義してしまうと、性質的な問題で**「nullはfalsyな値なので、if文の条件式ではfalseとなる」**と処理してしまう働きがあります。

なので上記同様に'': 'bg-red-200'と記述してしまうと、

初期状態から色が入ってしまうことになります。（nullだが、falseの影響が出てしまう）
なので'bg-blue-200' : ''というように記述しなければなりません。

NOボタンの場合は:class="answers.q1 === false（answer.q1はfalseと定義）と記述してしまいます。
これで初期値はnullではなくfalseなので、NOボタンをクリックしたら反対のtrueになることになります。
背景色も'bg-blue-200' : ''と記述しているので、初めから青く染まっているのではなく、しっかりクリックしてから青く染まるようになりました。

しかしこのままではYESもtrue、NOもtrueとデータをとってしまうので、@click="answer('q1',false)"と書き加えることで、NOボタンを押したら、answer.q1のデータにfalseが入るという処理法に塗り替えました！

NOボタンの処理をまとめるとボタンを押したらtrueになるのだが、データとして入るのはfalseであるということになります！

#最後に
今回はボタンを押したらデータ値をとる＆色が変わる方法についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！