VueJs / ChartJs-仅在我单击Vue Dev Tools中的组件时才呈现单个文件组件的计算属性

Question

I have a single file component that uses Chart.Js to render a simple visualization for some hard coded data. I'm calling the Chart.Js library through a CDN in the head section of my index.html.

I'm using the official Webpack template.

For some reason, the chart won't render unless I click on the component inside the Vue Dev Tools extension.

I've tried changing it from computed to created/mounted and that hasn't worked.

Here's my code. Any help getting this to render properly would be much appreciated.

<template lang="html">
  <div>
    <div class="row">
      <div class="col-sm-12 col-md-4">
        <canvas id="carbChart"></canvas>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      calories: 3000,
      childSex: 'male',
      childAge: 'eighteen'
    }
  },
  computed: {
    nutrientCharts: function() {
      let calories = this.calories;

      let carbCtx = document.getElementById('carbChart').getContext('2d');

      let carbChart = new Chart(carbCtx, {
        type: 'doughnut',
        data: {
          labels: ['Low', 'Good', 'Too Much'],
          datasets: [{
            label: 'carbs',
            data: [calories * .45, calories * .65, calories * 1],
            backgroundColor: ['orange', 'blue', 'red']
          }]
        }
      });
    }
  }
}
</script>

Answer 1

You have defined the method in a computed property but never used it.

Assuming you want to just get this running, load the chart on mounted:

mounted() {
  this.nutrientCharts();
},
methods: {
  nutrientCharts: function () {
    // your code here
  }
}