On saving data in Vue state, nodes' are flying in air (Not connected with edges)
Nehasoni988 opened this issue · comments
NEHA SONI commented
The data which is in file "map.js", I put that in-state, and after on first time reload its working fine, but on second-time page reload when I am dragging the nodes they are flying in the air not dragging with the edges.
Below is my code snippet-
Module (mindmap.js)-
function initialState() {
return {
nodes: [
{
'text': 'Python library',
'url': '',
'fx': -13,
'fy': -390,
'nodes': []
},
{
'text': 'Menu Section',
'url': '',
'fx': -13,
'fy': -250,
'nodes': []
},
{
'text': 'basics',
'url': '',
'fx': 96,
'fy': -300,
'nodes': []
}
],
connections : [
{
'source': 'Python library',
'target': 'basics',
'curve': {
'x': -43.5535,
'y': 299.545
}
},
{
'source': 'Python library',
'target': 'Menu Section',
'curve': {
'x': -78.1206,
'y': -114.714
}
},
]
}
}
In Vue component (MindMap.vue), I am taking data from the state using computed property-
<template>
<div>
<div align="center">
<v-row no-gutters>
<v-col sm="6">
<mindmap
:nodes="nodes"
:connections="connections"
:editable="true"
/>
</v-col>
</v-row>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'MindMap',
computed:{
...mapState({
nodes:state => state.mindmap.nodes,
connections:state => state.mindmap.connections
})
},
}
</script>
Here is the behavior this code is performing-