Компонент Gauge.js в Vue.js 3.2.1 не создается

Question

"Привет, я пытаюсь заставить простой gauge.js работать под Vue.js v3.2.1. Ссылка на документ get всегда возвращает ноль, так что смонтированная функция никогда не завершается. Это должно быть просто, но я боюсь, что мне где-то не хватает знаний, так как я новичок в Vue.js и не могу найти ничего, чтобы помочь. "

<template >
    <canvas ref="foo"></canvas>
</template>

<script>
import { Gauge } from 'gauge.js'

export default 
{
name: 'vcGaugeJs',
props: 
{
    value: {type: Number, default: 0},
    //options: { type: Object, default: () => ({}) }
},

data() 
{
      return 
  {
       gauge: null
      }
},

mounted: function () 
{   
this.initGauge();
},
  watch: 
  {
    value: function (val) 
{   
    this.gauge.set(val);
    },
  },



updated: function()
{
if (this.gauge == null)
{
    this.initGauge();
}
 },



  methods:
{
    initGauge () 
    {
        let opts = 
    {
        angle: 0, // The span of the gauge arc
        lineWidth: 0.35, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: 
        {
            length: 0.53, // // Relative to gauge radius
            strokeWidth: 0.057, // The thickness
            color: '#000000' // Fill color
        },
        limitMax: false,     // If false, max value increases automatically if value > maxValue
        limitMin: false,     // If true, the min value of the gauge will be fixed
        colorStart: '#6F6EA0',   // Colors
        colorStop: '#C0C0DB',    // just experiment with them
        strokeColor: '#EEEEEE',  // to see which ones work best for you
        generateGradient: true,
        highDpiSupport: true     // High resolution support
    }

    var target = this.$refs.foo;
    if (target == null)
    {
        console.log ("Null target ref!");
    }
    else
    {
        this.gauge = new Gauge(this.$refs.foo);
        this.gauge.maxValue = 3000; // set max gauge value
        this.gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
        this.gauge.animationSpeed = 62; // set animation speed (32 is default value)
        this.gauge.set(1700); // set actual value
        this.gauge.setOptions(opts); // create gauge!
    }
}
},  

}

Answer 1

Вот что команда разработчиков говорит:

Если вы посмотрите на жизненную схему жизненного цикла , вы можете увидеть это, когда вызывается хук created()функция шаблона / рендеринга компонента не была скомпилирована.

Таким образом, в вашем случае вы должны иметь возможность создать экземпляр датчика при mounted перехвате vm.$el, так как он является холстомэлемент.

mounted() {
   this.initGauge();
},

methods: {
   initGauge() {
      let opts = { /* options */}

      this.gauge = new Gauge(this.$el).setOptions(opts);

      this.gauge.maxValue = 3000; // set max gauge value
      this.gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
      this.gauge.animationSpeed = 62; // set animation speed (32 is default value)
      this.gauge.set(1700); // set actual value
   }
}