在删除的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>

无法处理组件内部道具的更改

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

这就是：

1. Vue首次呈现2个chart-one个实例，值[1,2]
2. 当您点击该按钮时，会要求Vue使用1 chart-one [1]
重新渲染
3. Vue将第一个组件上的id变量更新为2，然后看到它仍然剩下1个未使用的组件，因此它将其核对

这可以通过以下方式解决：

添加key变量：

如果您向chart-one组件添加key，则vue实际上可以执行＆＃34;跟踪＆＃34;实例：

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

而不是在第一个组件中执行＆＃34;更新值＆＃34;它现在智能地核对并重新创建dom节点以匹配传入的值。