[Vuejs]-Accessing top-level Vue data in nested getter/setter

by

0👍

✅

Edit:

Since this to the VueComponent can only be resolved at runtime, I came to this kinda hackish workaround:

<template>
  <div id="app">
    {{ foo.bar }} 
    <button @click="meaning++">click</button>  <!-- reactive now! -->
    <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: {meaning:42} as any, // put exactly the same literal initail value here
    get bar() {
        return this.that.meaning;
    },
    set bar(value) {
      this.that.meaning = value;
    },
  };

  created() {
    this.foo.that = this;
    console.log(this); // VueComponent
    console.log(this.foo.that); // VueComponent
    console.log(this === this.foo.that); // true
  }
}
</script>

Original answer:


For anyone face the same problem, I came to the conclusion that

it’s impossible to refer to outer-level data in inner-level object data in the Vue option instance.

Because the VueComponent instance can only be grabbed at run time, but you have to bind that:this in the constructor of the Vue config class, which is prior to the instantiation of VueComponent. Thus the reactive system of Vue won’t have any chance to correct the reference in that.

So the answer (for me) is simply don’t do this. Dependent must always be higher than (or on the equal level of) the dependency, and you can’t have foo as bar‘s namespace.

Elevate bar to the top level.

Leave a comment