前提・実現したいこと
データのラベルを入力して送信するためのフォームを作成して、自動で最新の入力値を反映するチャートを作りたい。
その中で該当ソースの 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>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/20 01:40
2020/01/20 06:11
2020/01/21 15:13
2020/01/23 05:12