Vuetify 迷你图抛出错误“无法读取未定义的属性 'getTotalLength'”答案

【问题标题】：Vuetify sparkline throws Error "Cannot read property 'getTotalLength' of undefined"Vuetify 迷你图抛出错误“无法读取未定义的属性 'getTotalLength'”
【发布时间】：2019-10-14 21:32:50
【问题描述】：

我想在 nuxt 中有一个简单的迷你图，但是在浏览器 (chrome) 中，在控制台中记录了这个错误：[ERROR] [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'getTotalLength' of未定义”

我在浏览器中看到的是图表绘制了一次然后就消失了。

我几乎可以肯定这个错误是由于自动绘制属性造成的。这是因为，我更改了其他属性，但在我删除自动绘制并且错误消失之前什么都没有发生。

<v-sparkline
      auto-draw
      :value="value"
    ></v-sparkline>

在脚本部分，这里是值：

 data: () => ({
value: [100, 200, 300]
 })

【问题讨论】：

标签： charts vuetify.js uicomponents

【解决方案1】：

我尝试重现您的错误但没有成功。如果您可以提供更多上下文或尝试在 codepen 中重现您的错误，那将很有帮助。

这是您的用例的工作代码笔： https://codepen.io/maxkoi/pen/Jqawjy

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-sparkline
        :value="value"
        auto-draw
      ></v-sparkline>
    </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  data: () => ({
    value: [100, 200, 300]
  })
})

【讨论】：

我已经在 codepen 中尝试过这些samples，正如你所说，效果很好。但是，在my-project 中却没有。您可以在 report.vue 页面中看到它。

【解决方案2】：

简短的回答是在安装时设置自动绘制：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-sparkline
        :value="value"
        :auto-draw="myAutoDraw"
      ></v-sparkline>
    </v-container>
  </v-app>
</div>

和

data: () => ({
  value: [100, 200, 300],
  myAutoDraw: false,
}),
mounted() {
  this.myAutoDraw = true
}

迷你图组件包括：

watch: {
  value: {
    immediate: true,
    handler () {
      this.$nextTick(() => {
        if (!this.autoDraw || this.type === 'bar') return

          const path = this.$refs.path
          const length = path.getTotalLength()

我认为 this.$refs.path 直到mounted() 运行后才存在。

【讨论】：

很抱歉这个迟到的答案。在这个link 中，迷你图运行良好，例如我问题中的代码。我尝试了您的解决方案，控制台中没有出现上述错误，但图表仍然消失。

【解决方案3】：

使用 v-if 绘制 v-sparkline

<v-sparkline v-if="timeToDraw"
                :value="value"
                :gradient="gradient"
                smooth="10"
                stroke-linecap="round"
                gradient-direction="top"
                auto-draw="false"
                type="trend"
            ></v-sparkline>

和

mounted(){
    this.timeToDraw = true;
}

vue挂载后会出现v-sparkline

【讨论】：

【解决方案4】：

不一定回答 OP 的问题，但也许它可以帮助其他人偶然发现这个问题。

当我的值数组的长度仅为 1 时，我收到了相同的错误消息。

抛出错误：

<v-sparkline
   :value="[1]"
></v-sparkline>

作品：

<v-sparkline
   :value="[1,2]"
></v-sparkline>

如果这可能是您的问题，请确保仅在数组长度为 2+ 时才渲染迷你图。

<v-sparkline
   v-if="data.length > 1"
   :value="data"
></v-sparkline>

【讨论】：