2

下面是我的 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>

我看不出代码有什么问题，也不知道为什么会导致循环。任何帮助，将不胜感激。我通过道具传递chartData。如果您还需要什么，请告诉我。

为了让事情变得更容易，下面是我传递道具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>

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

4

2 回答 2

2

您应该使用reactivePropmixin 而不是自己更新图表。

在文件中，它说：

在数据更改时，如果只有数据集中的数据发生更改，它将调用 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>
于 2018-07-30T02:02:44.447 回答
0

update()每次调用或首次渲染时，ChartJS 都会改变数据对象。它将_meta属性添加到chartData.dataset并且因为您使用了deep观察者，Vue 在 ChartJS 添加/更新_meta导致无限更新循环后立即调用观察者。

正如@ittus 所指出的，解决方案是使用包附带的内置 mixin。它有一个限制，您必须将整个chartData对象替换为反应式。否则，必须update()在数据对象更改后手动调用，因为在内部，mixin 提供的 watcher 不是deep.

但是，如果您不使用vue-chartjs库并构建了自己的包装器，或者您坚持使用观察器，则可以对对象deep进行深度克隆。data您可以使用LodashJSON.parse(JSON.stringify(data))或cloneDeep从 Lodash 获取。

进一步阅读：

于 2021-03-10T09:18:37.700 回答