Computed property returning an array of functions looses scope for this inside those functions

Question

I want to define a Vuetify textfield component with the rules prop

https://vuetifyjs.com/en/api/v-text-field/#props-rules

Since some of these rules rely on the current value of Vuex getters I can't define the rules inside the data function, I have to return them as a computed property.

This is a sample implementation, unfortunately I can't access the Vuex getter because this seems to have the wrong scope...

new Vue({
  el: '#app',
  methods: {
    run() {
      this.aLocalComputedProperty.forEach(func => {
        console.log(func());
      });
    }
  },
  computed: {
    mappedGetterFromVuex: () => true,
    aLocalComputedProperty: () => [
      () => "first rule is fine",
      () => {
        if (!this) {
          console.log("this is undefined");

          return null;
        } else if (!this.mappedGetterFromVuex) {
          console.log("this.mappedGetterFromVuex is undefined");

          return null;
        }

        return this.mappedGetterFromVuex;
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="run">run</button>
</div>

Does someone know how to fix that?

it's the same problem as this recent question https://stackoverflow.com/a/68921963/8172857 — Boussadjra Brahim, Aug 25 '21 at 11:33
why did you delete your question https://stackoverflow.com/q/68921616/8172857? — Boussadjra Brahim, Aug 25 '21 at 11:36

score 1 · Accepted Answer · answered Aug 25 '21 at 11:37

1

try to use the computed prop like this.

aLocalComputedProperty: function () {
      //your code here
    }

This should be in the right scope now

answered Aug 25 '21 at 11:37

moritz4004

26
5

Computed property returning an array of functions looses scope for this inside those functions

1 Answers1