vue-chartjsでデータバインディングしたい。

前提・実現したいこと

データのラベルを入力して送信するためのフォームを作成して、自動で最新の入力値を反映するチャートを作りたい。

その中で該当ソースの chartData: {labels: ['a', 'b', 'c', 'd', 'e']} の a〜e を取り出して
フォーム入力データバインディングがしたい。

発生している問題

addDataメソッド内で、オブジェクト内配列を指定してデータバインディングできない。

該当のソースコード

import { Radar, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

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

<template>
  <div class="radar">
    <radar-chart
      :chart-data="chartData"
      :options="options"
    />
  </div>
  <div class="form">
    <h3>Input form</h3>
    ●<form @submit.prevent="addData()">
      <div class="separate">
        <table>
          <tbody>
            <tr>
              ●<td><input v-model="label1" class="first" type="text" placeholder="first"></td>
              ●<td><input v-model="label2" class="second" type="text" placeholder="second"></td>
              ●<td><input v-model="label3" class="third" type="text" placeholder="third"></td>
              ●<td><input v-model="label4" class="forth" type="text" placeholder="forth"></td>
              ●<td><input v-model="label5" class="fifth" type="text" placeholder="fifth"></td>
            </tr></tr>
          </tbody>
        </table>
      </div>
      <div class="button">
        ●<button type="submit">
          submit
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import RadarChart from './RadarChart.js'

export const chartData = {}
export const labels = []

export default {  
  data () {
    return {
      chartData: {
        ●labels: ['a', 'b', 'c', 'd', 'e'], 
        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], 
            fill: true,
            pointHitRadius: 20,
            pointStyle: 'circle',
            pointRadius: 2
          }
        ]
      },
      options: {
        legend: {
          display: false,
          labels: {
            fontSize: 14
          }
        },
        scale: {
          pointLabels: {
            fontSize: 14
          },
          ticks: {
            min: 0,
            max: 100,
            stepSize: 20,
            fontSize: 0
          },
          angleLines: {
            display: true,
            color: 'gray'
          },
          gridLines: {
            display: true,
            color: 'gray'
          }
        }
      }
    }
  },
  ●methods: {
    addData () {
      for (const key in chartData.labels) {
        console.log(key)
      }
    }
  }
}
</script>

試したこと

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

回答1件

error 'chartData' is not defined no-undef エラーは回避することができたが

このエラーが発生しているのは、おそらく methods 内の以下部分だと思います。

javascript
1    addData () {
2      for (const key in chartData.labels) {
3        console.log(key)
4      }
5    }

methods 内定義のメソッドで Vue インスタンスのデータである chartData を利用する場合は、 this.chartData としてください(<template>～</template> 内では this は不要です)。

また、export const chartData = {} は不要なので削除してください。

↓正しい記述

javascript
1
2    addData () {
3      for (const key in this.chartData.labels) {
4        console.log(key)
5      }
6    }

投稿2020/01/18 09:39

R.Mizukami

総合スコア1086

toshihirokato

2020/01/20 01:40

ご回答頂きありがとうございます！早速、確認いたします

toshihirokato

2020/01/20 06:11

こんにちは。上記の通り、JS内の記述を変更し、 export const chartData = {} export const labels = [] こちらを削除したところ、error 'chartData' is not defined no-undef エラーが発生いたしました。

R.Mizukami

2020/01/21 15:13

こんにちは。そのエラーは、上述の this 抜けの部分で発生していませんか？ const chartData = {} を定義することでファイル内で利用できる変数として chartData 変数が定義されてしまうため見かけ上エラーが解消しますが、本質的な問題解決からはむしろ遠ざかっていると思います。

toshihirokato

2020/01/23 05:12

ご回答ありがとうございます。そうなのですね！

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