Question

我想在nuxt中创建一个简单的迷你图，但在浏览器（chrome）中，在控制台中记录了以下错误：[ERROR] [Vue警告]：nextTick中的错误：“ TypeError：无法读取属性'getTotalLength'未定义”

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

我几乎可以确定此错误是由于自动绘制属性引起的。这是因为，我更改了其他属性，直到删除了自动绘制并消失了错误，一切都没有发生。

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

在脚本部分中，值为：

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

Answer 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]
  })
})

Answer 2

最简单的答案是在安装时设置自动绘制：

<activity
            android:name=".Main2Activity"
            android:label="@string/title_activity_main2">

        <intent-filter> <-- this filter is added
            <action android:name="android.intent.action.SEND"/>

            <category android:name="android.intent.category.DEFAULT"/>

            <data android:mimeType="image/*"/>
        </intent-filter>
    </activity>

和

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

我不认为this。$ refs.path在mount（）运行之后才存在。

Answer 3

使用v-if绘制v-火花线

<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

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

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

4 个答案: