VueJs/ChartJs - 单文件组件计算属性仅在我单击 Vue 开发工具中的组件时呈现

Posted 2023-02-22

【中文标题】VueJs/ChartJs - 单文件组件计算属性仅在我单击 Vue 开发工具中的组件时呈现

【英文标题】：VueJs/ChartJs - single file component computed property only renders when I click the component in Vue Dev Tools

【发布时间】：2017-11-29 14:55:05

【问题描述】：

我有一个文件组件，它使用 Chart.Js 为一些硬编码数据呈现简单的可视化。我通过 index.html 的 head 部分中的 CDN 调用 Chart.Js 库。

我使用的是官方的 Webpack 模板。

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

我尝试将其从计算更改为创建/安装，但没有奏效。

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

<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>

【问题讨论】：

计算属性是延迟加载的，因此在模板或 vue 实例代码的其他部分引用它们之前，它们不会被计算。您没有在任何地方引用 nutrientCharts，因此不会调用该方法。

【参考方案1】：

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

假设您只想让它运行，请在挂载时加载图表：

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

【讨论】：

很高兴听到它对您有所帮助 :)