TypeError: Cannot read private member from an object whose class did not declare it when I use setData()
Wuwuyiaewu opened this issue · comments
<template>
<div class="crc-vis-box h-full flex justify-center items-center">
<div id="viz" ref="canvas" class="vis-canvas border">
</div>
</div>
</template>
<script setup lang="ts">
import * as vis from 'vis-network'
import type { Network } from 'vis-network'
import { dataList } from "@/composables/vis/vis-data";
import { options } from "@/composables/vis/vis-options";
import { nextTick, onMounted, ref, type Ref } from "vue";
const canvas: Ref<Network | undefined> = ref()
const networkData = ref(dataList)
onMounted(async () => {
const container = document.getElementById('viz');
if (container) {
canvas.value = new vis.Network(container, networkData.value, options)
const newData = {
nodes: [{ id: 1, label: 'Node 1' }],
edges: [],
};
canvas.value?.setData(newData);
} else {
console.error('Container element not found.');
}
})
</script>
I use vue3 + vis-network. When I use on to register the event, I hope I can setData when the event is triggered. This problem occurs.
I tried adding nextTick approach
canvas.value?.setData(newData);
↓
canvas.value?.on('click', (params) => {
console.log(params);
nextTick(() => {
canvas.value?.setData(newData);
});
})
error message from
Uncaught (in promise) TypeError: Cannot read private member from an object whose class did not declare it
at __classPrivateFieldGet (weak-map.js:1:18)
at Proxy.clear2 (selection-accumulator.ts:138:5)
at Proxy.unselectAll (SelectionHandler.js:369:32)
at Network.setData (Network.js:398:25)
at VisDDD.vue:27:23
at runtime-core.esm-bundler.js:2679:88
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2659:19)
at flushPostFlushCbs (runtime-core.esm-bundler.js:325:40)
became
Uncaught (in promise) TypeError: Cannot read private member from an object whose class did not declare it
at __classPrivateFieldGet (weak-map.js:1:18)
at Proxy.clear2 (selection-accumulator.ts:138:5)
at Proxy.unselectAll (SelectionHandler.js:369:32)
at Network.setData (Network.js:398:25)
at VisDDD.vue:30:31
I also got this from Stackoverflow
https://stackoverflow.com/questions/76961106/is-visjs-network-supported-by-vue3
Saw the same question
I'm facing a bit of a problem and I'm hoping someone can lend me a hand. Would really appreciate your help. Thanks a ton!
Do not use ref, simply define a variable using let or const, and there will be no error accessing private member variables or methods, like this:
let network = null;
// 初始化网络
network = new Network(utg_div, data, options);