如何在Vue.js的单文件组件中从方法中访问计算属性

Question

我有一个普通的 单文件组件，它既有一个计算属性，也有一些方法：

<template>...</template>
<script>
...
export default {
    props: ['matches'],
    data: function() {...}  // No problem with these

    computed: {
        formattedMatches: function () {
            let formatted = [];
            this.matches.forEach(function($match, $i, $arr) {
                formatted[$i] = $match[0];
            };
        });
        return formatted;
    }
    ...

    methods: {
        getData: function() {
            return this.formattedMatches();
        },
        ...
    }
}
<script>

当我尝试从方法中访问this.formattedMatches()时，出现了[Vue warn]: Error in render: "TypeError: this.formattedMatches is not a function" 的错误提示。

请问达到我的目的的正确方法是什么？谢谢。

- andcl

---

计算属性是一个属性，而非一个方法。因此，请将 this.formattedMatches() 更改为 this.formattedMatches。 - Sphinx

谢谢，问题已解决，你是对的。 - andcl

Answer 1

您可以像访问 property 一样访问计算属性，而不是像访问 method 一样：

// correct    
console.log(this.myProperty);

// wrong    
console.log(this.myProperty());

注意：如果您将其视为带有括号()的方法，则会抛出此类错误：Error in v-on handler: "TypeError: this.myProperty is not a function"。

- moritz.vieli

---

当我尝试将属性作为方法使用时，如何知道只需要属性而不是方法？谢谢。 - user6221709

Answer 2

我已经给定了

isWeb: function () {
        return isWebOnly;
      }

在计算属性中。

现在我必须在方法部分使用isWeb()。

isQuickViewEnabled (
        { userData }: {userData: AlgoliaUserData[] | undefined }): boolean {
        if (Array.isArray(userData)) {
          const quickViewEnabled = userData[0]?.quick_view_enabled;
          return this.**isWeb** && quickViewEnabled;
        }
        return false;
      },

但是它会提示“在类型'CombinedVueInstance<Vue，unknown，unknown，unknown，Readonly<{ product: any; position: number; results: any; cornerFlagsRules: CornerFlags[]; }>>'上不存在属性'isWeb'。”

- Shivani