Nuxt.jsでURLのクエリに対応したデータを動的に表示する方法

はじめに

webについて学習中の者です。
私は現在、LaravelとNuxt.jsを使用し、webアプリの作成を試みています。
行き詰ったため、質問させていただきます。

前提・実現したい事

URLのクエリに入れる値によって、表示するものを変えたいです。
この投稿に書かれてあるデータは全てLaravelで作成したAPIの中にあるものとします。

環境

Windows10
PHP
Laravel
Nuxt.js
vue-chartjs

作成したいもの

画面上にボタン２つと、グラフ１つあるとします。
グラフは、基準日から30日前までの、ある施設の入館者数です。
デフォルト（初期表示）では、今日から30日前までのグラフが表示されます。
ボタン①を押すと、前日から31日前までのグラフが表示されます。
ボタン②を押すと、翌日から29日前までのグラフが表示されます。

ボタン①②ともに、何度も押せるようになっています。
（①を３回押すと、3日前から33日前までのグラフが表示）

検討している実装方法

初期表示では、URLのクエリパラメータが今日の日付になっている。
ボタン①を押すと、URLのクエリパラメータの日付が前日に変わり、それと当時にグラフに使用しているデータが変わる。

質問

（１）上記のようにボタンを押すとクエリが変わり、そのクエリに適した値を動的に持ってくるというのは可能でしょうか？
（２）可能であれば、どのようなコードで実現可能か（説明のみや所々省いても構いません）、ご教授お願いします。

スクリーンショットが無く、分かりにくいかと思いますが、ご指摘いただければ追記いたします。
よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

簡易例書いてみました。
TypeScriptプロジェクトで作ったのですが、JSでも同じように動くはず・・・

pages/index.vue

<template>
  <section>
    <button @click="upCount">up</button>
    <button @click="downCount">down</button>
    {{ `https://example.com?q=${count}` }}
  </section>
</template>

<script lang="ts">
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    upCount: function() {
      this.count++;
    },
    downCount: function() {
      this.count--;
    }
  }
};
</script>