<template>
<div id="app">
{{ foo.bar }}
<button @click="meaning++">click</button> <!--not reactive-->
<button @click="foo.bar++">click2</button>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class App extends Vue {
private meaning = 42;
private foo = {
that:this,
get bar() {
return this.that.meaning;
},
set bar(value) {
this.that.meaning = value;
},
};
created() {
console.log(this); // VueComponent {}
console.log(this.foo.that); // App {}
console.log(this === this.foo.that); // false
}
}
</script>
I need to establish a connection between foo.bar and meaning, which is a top-level data field. The initial workaround involves saving this (the Vue option instance) in that. However, the issue arises when this refers to the VueComponent instance instead of this.foo.that.meaning during runtime.
Another challenge is that the above code snippet causes vue-devtools to malfunction within Chrome, as it attempts to invoke Object.keys() on instance._data, which is null.
What is the correct method for linking foo.bar to meaning? The logic within those getter and setter functions may be complex.