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

Question

我有一个文件组件，它使用 Chart.Js 为一些硬编码数据呈现简单的可视化效果。我在 index.html.

的 head 部分通过 CDN 调用 Chart.Js 库

我使用的是官方 Webpack 模板。

出于某种原因，图表不会呈现，除非我单击 Vue Dev Tools 扩展中的组件。

我尝试将其从计算更改为 created/mounted，但没有成功。

这是我的代码。任何帮助正确渲染它的帮助将不胜感激。

<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

您在 computed 属性中定义了方法，但从未使用过。

假设您只想获取此运行，请在挂载的图表上加载：

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

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

VueJs/ChartJs - single file component computed property only renders when I click the component in Vue Dev Tools

javascript

webpack

vue.js

chart.js

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

VueJs/ChartJs - single file component computed property only renders when I click the component in Vue Dev Tools

javascript

webpack

vue.js

chart.js

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