javascript - 在已删除的 Vue.js 组件中使用时，Plotly.js 呈现错误的图表

Question

问题

我有两个图表包含在两个组件中。当我删除第一个组件时，第一个图表保留下来。

参见 jsfiddle:https://jsfiddle.net/m4ywp5fc/4/

方法

我正在尝试使用 Plotly.replot 重新绘制图表，但 Vue.js 似乎在内部做了一些我不明白的事情。此外，Plotly.purge 在这种情况下什么也不做。

代码

或查看 jsfiddle:https://jsfiddle.net/m4ywp5fc/4/

JavaScript

Vue.component('chart-one', {
    props: ['id'],

  template: `<div :id="'chart-' + id"></div>`,

  mounted () {
    const trace = {
      x: [1, 2, 3, 4],
      y: Array.from({length: 4}, () => Math.floor(Math.random() * 40))
    }

    Plotly.newPlot('chart-' + this.id, [trace])
  }
})

new Vue({
  el: '#app',

  data: () => ({
    charts: [1, 2]
  }),

  methods: {
    remove () {
        this.charts.splice(0, 1)
    }
  }
})

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="app">
  Charts: {{ charts }}
  <button @click="remove">
    Delete first chart
  </button>

  <div v-for="(chart, index) in charts">
    <chart-one :id="'chart-' + index"></chart-one>
  </div>
</div>

补充说明

请注意我的申请要复杂得多。

Answer 1

您的问题是由两个原因引起的:

您的演示代码中有错别字

<chart-one :id="'chart-' + index"></chart-one>

应该是

<chart-one :id="'chart-' + chart"></chart-one>

无法处理组件内 props 的更改

Vue 默认假定组件在其属性更改时自动更新，而这是框架本身的一部分，您的组件无法处理这种情况。

是这样的:

1. Vue 首先呈现 chart-one 的 2 个实例，以及值 [1, 2]
2. 当你点击按钮时，Vue 被要求重新渲染 1 chart-one [1]
3. Vue 将第一个组件上的 id 变量更新为 2，然后发现它还有 1 个未使用的组件剩余，因此将其删除

可以通过以下方式解决:

添加一个键变量:

如果你添加一个key对于 chart-one 组件，vue 实际上可以对实例进行“跟踪”:

<chart-one :id="'chart-' + chart" :key="chart"></chart-one>

它不再执行“第一个组件中的更新值”，而是智能地核对并重新创建 dom 节点以匹配传入的值。