Issue
I am facing a problem with deleting one of the components that contains a chart. Even after deleting the component, the chart remains visible.
To see an example, check out this jsfiddle: https://jsfiddle.net/m4ywp5fc/4/
Solution Attempted
I attempted to replot the chart using Plotly.replot, but it seems like Vue.js might be interfering with this process internally. Additionally, applying Plotly.purge did not resolve the issue in this case.
Code Snippet
For code reference, please visit jsfiddle: https://jsfiddle.net/m4ywp5fc/4/
JavaScript Code
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 Code
<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>
Note
Please note that the actual application is more complex than this isolated scenario.