背景關系：我的“mounted()”鉤子中有一個函式，可以在單擊操作時切換布爾變數（drawerNode）。此變數的更新值需要作為道具傳遞給子組件。
問題：當我單擊圖表中的氣泡以切換抽屜節點的值時，我在控制臺中得到“in graph: true”。因此，圖表中用于切換值的功能似乎有效。另一方面，我沒有從我的觀察者那里得到任何東西。我還在子組件中放置了另一個觀察程式，以查看drawerNode props 值是否正在通過。同樣的情況，觀察者不會觸發，因為它沒有接收到值的變化，drawerNode 的傳遞值保持“假”而不是“真”。
由于某種原因，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>
uj5u.com熱心網友回復：
使用 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)
})
;}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432676.html
標籤：javascript Vue.js Vuejs2 Vue 道具
上一篇：Vue Vuetify Nuxt-在v-for回圈中渲染組件串列
下一篇：在打字稿中將函式作為引數傳遞