Vuetify sparkline throws Ошибка "Не удается прочитать свойство 'getTotalLength' из неопределенного" - PullRequest
Новая
       31

Vuetify sparkline throws Ошибка "Не удается прочитать свойство 'getTotalLength' из неопределенного"

0 голосов
/ 29 мая 2019

Я хочу иметь простой спарклайн в nuxt, но в браузере (chrome), в консоли эта ошибка регистрируется: [ОШИБКА] [Vue warn]: Ошибка в nextTick: "TypeError: Невозможно прочитать свойство 'getTotalLength' изundefined "

То, что я вижу в браузере, - это то, что график рисует один раз, а затем исчезает.

Я почти уверен, что эта ошибка связана со свойством автоматического рисования.Это потому, что я изменил другие свойства, и ничего не происходило до тех пор, пока я не удалил авто-рисование и ошибка исчезла. 

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

В разделе сценариев приведено значение: 

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

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Краткий ответ - установить автоперерисовку на смонтированном: 

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

Я не думаю, что это. $ Refs.path существует до тех пор, пока не будет запущен mount ().

0 голосов
/ 29 мая 2019

Я попытался воспроизвести вашу ошибку безуспешно.Если бы вы могли предоставить больше контекста или попытаться воспроизвести свою ошибку в коде ручки, это было бы полезно.

Вот кодовый код работающий вашего варианта использования: 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]
  })
})
...