代码之家 › 专栏 › 技术社区 › TytonDon

[vue warn]:观察程序中可能有无限更新循环,表达式为“chartdata”

vue-chartjs chart.js vue.js

0

TytonDon · 技术社区 · 7 年前

以下是警告中提到的监视程序的我的Vue文件副本:

<script>
  import { Radar } from 'vue-chartjs'

  export default {
    extends: Radar,
    props:['chartData','options'],
    mounted () {
      this.renderChart(this.chartData, this.options)
    },
    watch: {
      chartData: {
        handler: function(newVal, oldVal) {
          this.$data._chart.update()
        },
        deep: true
      }
    }
  }
</script>

我看不出代码有什么问题,也不知道它为什么会导致循环。任何帮助都将不胜感激。我正在通过props传递ChartData。如果你还需要什么,请告诉我。

为了使事情更简单,下面是我如何传递Prop ChartData:

<caChampions :chartData="dataForLChampions" :options="optionsForLChampions" />

每次有人从下拉列表中选择某个内容时,都会更新此数据。下拉列表中的代码如下:

<v-autocomplete
                label="Champion"
                placeholder="Enter Champion's Name Here"
                :loading="championSelectLoading"
                v-model="selectedChampion"
                @input="getChampionInfo()"
                :items="champions"
                autocomplete
                autofocus
                outline
                full-width
                ></v-autocomplete>

第一次有人选择某个东西时,效果很好。但是,上的第二个选择创建了一个循环,我不知道为什么。

1 回复 | 直到 7 年前

1

ittus 7 年前

你应该使用 reactiveProp 混合而不是自己更新图表。

在 document 它说:

在数据更改时,如果只有内部数据,它将调用update()。如果添加了新数据集,则数据集已更改或renderchart()。

<script>
  import { Radar, mixins } from 'vue-chartjs'

  export default {
    extends: Radar,
    props:['chartData','options'],
    mixins: [mixins.reactiveProp],
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>