フォームのテキスト入力による、データをグラフに反映させるコードの作成方法が知りたい。

前提・実現したいこと

現在、私は中学生の家庭教師をしており、生徒の得意な科目と不得意な科目を直感的に理解できるレーダーチャートを、
Vue.js, Nuxt.js, vue-chartjs, chart.js, Firebase を用いて開発しております。

JavaScriptで目的のアプリは作成できたのですが、そのソースコードをNuxt.jsに置き換えたいです。

発生している問題・エラーメッセージ

JavaScriptである程度の形のものは開発できたのですが、そのソースコードをNuxt.jsに置き換えようとしてもフォーム入力のデータバインディング部分をどう実装すれば良いかわかりません。

また、生徒数が多いため、そのデータを管理するためにNuxt.js+Firebaseを用いたいです。

以下、作成したサンプルでございます。

![]

HTML+JavaScriptのソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chart.js レーダーチャート</title>
<style>
    h1       { font-size:  200%; color: black;  text-align: center }
    table, td, th {border: 1px silver solid; border-collapse: collapse;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

</head>

<body onLoad = "fillData()">

<h1>Chart.js フォームからデータを読込みレーダーチャートを表示</h1>
<hr>

<div  style="float: left">
<canvas id="myChart" width="350" height="350"></canvas>
</div>

<h3>入力フォーム</h3>
<form name="input">
<table><tbody>
<tr><td></td>
<td><input type="text" size="13" value="現代文"></td>
<td><input type="text" size="13" value="数学"></td>
<td><input type="text" size="13" value="英語"></td>
<td><input type="text" size="13" value="理科"></td>
<td><input type="text" size="13" value="社会"></td>
</tr></tr>
<tr><td><input type="text" size="13" value=""></td></td>
<td><input type="text" size="13" value="100"></td>
<td><input type="text" size="13" value="90"></td>
<td><input type="text" size="13" value="80"></td>
<td><input type="text" size="13" value="70"></td>
<td><input type="text" size="13" value="60"></td>
</tbody></table>
<input type="button" value="実行" onclick="fillData()">
</form>

<script>
function fillData() {

  // ========= フォーム読込 ===========

  var theme = [];

  for (var j=0; j<5; j++) {
    theme[j] = document.input.elements[j].value;
  }

  var data = [];

  for (j=0; j<5; j++) {
    data[j] = document.input.elements[6+j].value;
  }

  // ======== 系列別固定パラメータ
  var lineColor = "rgba(255,204,0,1)";
  var mainColor = "rgba(255,204,0,0.4)";

  // ======================= レーダーチャート表示 ====================

  var ctx = document.getElementById("myChart")
  var myChart = new Chart(ctx, {
    type: "radar",    // グラフの種類　レーダーチャート
    data: {
      labels:  theme,  // 軸のラベル

      // ========= 各系列個別 ===========
      datasets: [
        {
          label: ["Toshi"],
          data: data,
          backgroundColor: mainColor,             // 線の下の塗りつぶしの色
          borderColor: lineColor,                 // 線の色
          pointBorderColor: lineColor,            // 点の境界線の色
          pointBackgroundColor: lineColor,        // 点の塗りつぶし色
          borderWidth: 2,                       // 線の幅
          pointStyle: "circle",                 // 点の形状
          pointRadius: 2,                       // 点形状の半径
          pointBorderWidth: 2,                  // 点の境界線の幅
        }
      ]
    },

    // ========= 全系列共通（これらは全て固定） ==========
    options: {
      responsive: false,
      title: {                 // タイトル
        display: true,
        fontSize: 18,
        text: "レーダーチャート"
      },
      legend: {
          position: 'bottom'   // 凡例の表示位置
      },
      scale: {
        pointLabels: {       // 軸のラベル（"国語"など）
          fontSize: 14,         // 文字の大きさ
          fontColor: "black"    // 文字の色
        },
        ticks: {             // 目盛り
          min: 0,              // 最小値
          max: 100,            // 最大値
          stepSize: 20,        // 目盛の間隔
          fontSize: 0,        // 目盛り数字の大きさ
          fontColor: "black"  // 目盛り数字の色
        },
        angleLines: {        // 軸（放射軸）
          display: true,
          color: "gray"
        },
        gridLines: {         // 補助線（目盛の線）
          display: true,
          color: "gray"
          }
        }
      }
  });
}
</script>
</div>

</body>
</html>

Nuxt.jsのソースコード

import { Radar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  name: 'RadarChart',
  extends: Radar,
  mixins: [reactiveProp],
  props: ['options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}

<template>
  <div class="upload">
    <Upload />
    <div class="radar">
      <!-- ラベルの色の濃さを上位から順に薄くしていく -->
      <radar-chart
        :chart-data="datacollection"
        :options="chartOptions"
      />
    </div>
  </div>
</template>

<script>
import RadarChart from './RadarChart.js'
import Upload from '~/components/Upload.vue'
const n1 = '現代文'
const n2 = '数学'
const n3 = '英語'
const n4 = '理科'
const n5 = '社会'

export default {
  components: {
    Upload,
    RadarChart
  },
  data () {
    return {
      datacollection: null,
      chartOptions: {
        legend: {
          display: false,
          labels: {
            fontSize: 14
          }
        },
        scale: {
          pointLabels: {
            fontSize: 14
          },
          ticks: {
            min: 0,
            max: 100,
            stepSize: 20,
            fontSize: 0
          }
        }
      }
    }
  },
  mounted () {
    this.fillData()
  },
  methods: {
    fillData () {
      this.datacollection = {
        labels: [n1, n2, n3, n4, n5],
        datasets: [
          {
            backgroundColor: 'rgba(255, 204, 0, 0.4)', // 塗り潰しの色
            borderColor: 'rgba(255, 204, 0, 1)', // 線の色
            pointBackgroundColor: 'rgba(255, 204, 0, 1)', // 点の塗り潰しの色
            pointBorderColor: '#fff', // 点の境界線の色
            pointHoverBackgroundColor: '#fff', // マウスオーバー時の点の背景色
            pointHoverBorderColor: 'rgba(255, 204, 0, 1)', // マウスオーバー時の点の境界線の色
            data: [100, 90, 80, 70, 60], // numbers
            fill: true,
            pointHitRadius: 20,
            pointStyle: 'circle',
            pointRadius: 1
          }
        ]
      }
    }
  }
}

</script>

<style>
.upload {
  height: 300px;
  width: 300px;
  margin: 20px 20px;
  padding: 20px 20px;
}

.radar {
  height: 300px;
  width: 300px;
}

.button {
  margin: 20px 62px;
}
</style>

参考にしたサイト

Chartjs について
 vue-chartjs, RadarChart について
 Nuxt.js + Chartjs について
 ApexCharts について

補足情報

{
  "name": "",
  "version": "1.0.0",
  "description": "My epic Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.8.0",
    "chart.js": "^2.9.3",
    "eslint-plugin-import": "^2.19.1",
    "firebase": "^7.6.0",
    "jquery": "3.4.1",
    "latest": "^0.2.0",
    "nuxt": "^2.10.2",
    "quasar-framework": "^0.17.20",
    "vue-chartjs": "^3.5.0",
    "vue-croppa": "^1.3.8",
    "yarn": "^1.21.1"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.0",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/vuetify": "^1.9.1",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-nuxt": ">=0.5.0"
  }
}