【Nuxt.js】ボタンクリックで画面を表示させる方法

はじめに

こんにちは！
今回は【Nuxt.js】ボタンクリックで画面を表示させる方法についてアウトプットしていきます！

前提

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

対象

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

実装

template

<button class="mb-16 px-20 border-4 border-green-200 text-center rounded-full hover:bg-green-100 duration-1000" 
       @click="openQuestion" >
    <p class=" py-4 w-64 text-2xl">診断を始める！</p>
</button>

    <div v-if="showQuestion" class="bg-green-100 bg-opacity-85 py-28">
      <div class="max-w-screen-md m-auto  mb-28 py-16 border-4 border-red-600 rounded-lg bg-white">
          <p class="text-4xl ">Q.1</p>
          <p class="py-8 text-2xl">コミュニケーションで悩んだことはありますか？</p>
          <ul class="flex justify-center tracking-widest">
              <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>
          </ul>
      </div>

script

  data() {
    return {
      showQuestion: false,
    };
  },

  methods: {
    openQuestion() {
      this.showQuestion = true;
    },

解説

コード見にくくて大変申し訳ありません。今回注目していただきたいのは@click="openQuestion"、v-if="showQuestion"の部分です。
scriptを見ていただくとshowQuestionはfalse、openQuestionはshowQuestionをtrueにするという記述がされています。

tempulate側でdivにv-if="showQuestion"と記述することで、falseが働き画面に表示させないようにしています。
それを上記に記述してあるbuttonで@click="openQuestion"と記述することで、「このボタンが押されたら、showQuestionをtrueにする」という処理が働く。よって以下のように

診断を始める！ボタンを押すと、

false指定した画面が表示されるということになる。

最後に

今回はボタンクリックで画面を表示させる方法についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

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

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