vue2 props, mounted hook and reactivity not working as expected-CodePudding

Context : I have a function in my "mounted()" hook that toggles a boolean variable(drawerNode) uppon a click action. The updated value of this variable needs to be passed to a child component as a prop.

Problem : When I click on a bubble in the graph in order to toggle the value of drawerNode, I get " in graph : true" in my console. So the function in the graph to toggle the value seems to work. On the other hand, I am not getting anything from my watcher. I also placed another watcher in the child component to see if the drawerNode props value is going through. Same happens, the watcher doesn't trigger since it is not picking up the value changes, the passed value of drawerNode remains "false" instead of "true".

It seems that the value of drawerNode only changes locally inside my graph for some reason.

Constraints : The code within "mounted()" must remain the same.

Thanks you in advance for any peice of advice

The parent component looks like this:



<template>
 <div  style="position: absolute; width:100%; height:100%" >
     <NodeDrawer :drawerNode="drawerNode"/>
     <div  style="overflow: hidden; width: 100%;">
         <div ref="graph" >
                
         </div>
     </div> 
 </div>
</template>

<script>
import NodeDrawer from '../components/NodeDrawer.vue'
export default {
  components: {NodeDrawer},

  setup(){
   
  },

methods: {
     createGraph(){
     // in my createGraph function , I have this on click method that will toggle 
     // drawerNode to true/false when user clicks on the graph's bubbles.
            .on("click", function() { 
            this.drawerNode = !this.drawerNode
            console.log(" in graph : ",this.drawerNode)
        })
        ;}
    },

watch: {
        drawerNode: function(){
            console.log('in watch : ', this.drawerNode)  
        },
    },


mounted() {
     const svgobj = this.createGraph()
     this.$refs.graph.appendChild(svgobj)
    },


 data() {
      return {
      drawerNode: false
}}



}
</script>


<style>
</style>

CodePudding user response：

Use a lambda function, or capture this in a closure.

createGraph(){
     // in my createGraph function , I have this on click method that will toggle 
     // drawerNode to true/false when user clicks on the graph's bubbles.
            .on("click", ()=>{ 
            this.drawerNode = !this.drawerNode
            console.log(" in graph : ",this.drawerNode)
        })
        ;}

createGraph(){
     const that = this
     // in my createGraph function , I have this on click method that will toggle 
     // drawerNode to true/false when user clicks on the graph's bubbles.
            .on("click", function() { 
            that.drawerNode = !that.drawerNode
            console.log(" in graph : ",that.drawerNode)
        })
        ;}