[Vuejs]-Vue use ref: TypeError: Cannot write private member xxx to an object whose class did not declare it

by

0👍

✅

thanks for all answer！
i solve it using markRaw provided by vue.
Like this:

import { ref,markRaw } from 'vue'
class Outer {
    inner: Raw<Inner> = markRaw(new Inner('aaa'))
    getInnerName() {
        return this.inner.getName()
    }
}
class Inner {
    #name: string
    constructor(name: string) {
        this.#name = name
    }
    getName() {
        return this.#name
    }
}
const outer = ref(new Outer())
console.log(outer.value.getInnerName())

This func will mark the attribute can’t be ref and when use ref(new Outer()), inner won’t be influenced. You can’t tracking the variation of inner, but fortunately i don’t need to track it.

👤肉蛋充肌

1👍

You can bind the method on the constructor if you like. Here’s an example:

this.getName = this.getName.bind(this)

So, your full example would be like this:

import { ref } from 'vue'
class Outer {
    inner = new Inner('aaa')
    getInnerName() {
        return this.inner.getName()
    }
}
class Inner {
    #name
    constructor(name) {
        this.#name = name
        this.getName = this.getName.bind(this)
    }
    getName() {
        return this.#name
    }
}
const outer = ref(new Outer())
console.log(outer.value.getInnerName())

Sorry, i remove the type

edit 1:

I tried using proxy to access the object value like this:

const p = new Outer();
const proxy = new Proxy(p, {
    get: (target, prop, receiver) => {
        return target[prop];
    }
});

And tried to access it like this:

const outer = ref(new Outer())
const a = ref(proxy.getInnerName())
console.log(a) /// aaa

Without no problem. So you can try it

👤cantdocpp

Leave a comment