vue2 道具、已安装的挂钩和反应性未按预期工作

Question

上下文：我的“mounted()”挂钩中有一个函数可以根据单击操作切换布尔变量 (drawerNode)。该变量的更新值需要作为 prop 传递给子组件。

问题：当我单击图表中的气泡以切换 drawerNode 的值时，我在控制台中看到“in graph : true”。因此图中切换值的函数似乎有效。另一方面，我没有从观察者那里得到任何东西。我还在子组件中放置了另一个观察者，以查看 drawerNode props 值是否正在通过。同样的情况，观察者不会触发，因为它没有获取值更改，drawerNode 的传递值仍然是“false”而不是“true”。

由于某种原因，drawerNode 的值似乎只在我的图形内部发生局部变化。

约束：“mounted()”中的代码必须保持不变。

提前感谢您的任何建议

父组件如下所示：



<template>
 <div class="col" style="position: absolute; width:100%; height:100%" >
     <NodeDrawer :drawerNode="drawerNode"/>
     <div class="main-map-container" style="overflow: hidden; width: 100%;">
         <div ref="graph" class="canvas">
                
         </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>

Answer 1

使用 lambda 函数，或在闭包中捕获 this。

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)
        })
        ;}

vue2 道具、已安装的挂钩和反应性未按预期工作

vue2 props, mounted hook and reactivity not working as expected

javascript

vue.js

vuejs2

vue-props