Vue.js × Firestore × Chart.js を使いリアルタイムでグラフを更新する方法

yarn add [email protected]
yarn add [email protected]

actions: {
  fetchQuestions({ commit }) {
    firebase.firestore().collection('question').onSnapshot(snapshot => {
	// Firestore のデータを取得してステートに入れて使う
    });
  },

<label>
  <input type="radio" :value="'yes_' + item.id" v-model="answer[index]">Yes
</label>
<label>
  <input type="radio" :value="'no_' + item.id" v-model="answer[index]">No
</label>

<input type="submit" value="送信" @click="send">

methods: {
	send() {
		this.$store.dispatch('addAnswer', this.answer);
	}

import firebase from "firebase/app";

mutations: {
	addAnswer() {
    router.push({ name: 'done' }, () => {});
  },

actions: {
	addAnswer({ commit }, answer) {
		// Firestore のデータを更新
  },

<script>
import { mapActions } from 'vuex';
import { Bar } from 'vue-chartjs';

export default {
  extends: Bar,
  watch: {
    questions: {
      handler() {
        this.makeChart();
      },
      deep: true
    }
  },
  mounted() {
    if (this.$store.state.questions.length === 0) this.fetchQuestions();
    this.makeChart();
  },
  data() {
    return {
      chartData: {
        contents: [],
        labels: null,
        datasets: [
          {
            label: 'Yes',
            data: null,
            borderWidth: 1,
            backgroundColor: '#ccffff'
          },
          {
            label: 'No',
            data: null,
            borderWidth: 1,
            backgroundColor: '#ffcccc'
          }
        ]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: ''
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 10,
            }
          }]
        }
      },
      questions: this.$store.state.questions,
    }
  },
  methods: {
    makeChart() {
      this.chartData.labels = [];
      let yes = [], no = [];
      this.$store.getters.getAnswers.forEach((answer, index) => {
        this.chartData.labels.push('No ' + (index + 1));
        yes.push(answer.yes);
        no.push(answer.no);
      });
      this.chartData.datasets[0].data = yes;
      this.chartData.datasets[1].data = no;

      this.renderChart(this.chartData, this.options);
    },
    ...mapActions(['fetchQuestions'])
  }
}
</script>

<template>
  <div class="contain">
    <h3>アンケート回答結果</h3>
    <Menu/>
    <div>
      <Chart/>
      <ul v-for="(answer, index) in this.$store.getters.getAnswers" :key="index">
        <li>No {{ index + 1 }} : {{ answer.content }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Chart from './Chart';

export default {
  components: {
    Chart
  }
}
</script>