返回函数数组的 Computed 属性在这些函数中失去了 this 的作用域

Question

我想用 rules prop

定义一个 Vuetify 文本字段组件

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

由于其中一些规则依赖于 Vuex getters 的当前值我无法在 data 函数中定义规则，我必须 return 它们作为计算属性.

这是一个示例实现，不幸的是我无法访问 Vuex getter 因为 this 似乎有错误的范围...

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>

有人知道如何解决这个问题吗？

Answer 1

尝试像这样使用计算道具。

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

现在应该在正确的范围内

返回函数数组的 Computed 属性在这些函数中失去了 this 的作用域

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

javascript

vue.js

vuetify.js

返回函数数组的 Computed 属性 在这些函数中失去了 this 的作用域

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

javascript

vue.js

vuetify.js

返回函数数组的 Computed 属性在这些函数中失去了 this 的作用域