Javascript 未捕获类型错误：从Vue中的数据调用方法时不是函数

当我运行以下命令时，出现错误：“UncaughtTypeError:this.thePerson不是函数”：

var myApp = new Vue({
    el: "#app",
    data: {
        person: [this.thePerson()]
    },
    methods: {
        thePerson: function() {
            return {
                personNickname: "Bob",
                personOwes: 0,
                paymentType: {
                    card: true,
                    cash: false
                }
            };
        }
    }
});

我不明白为什么

---

另外，我意识到这是一个看起来很奇怪的代码，但我使用函数返回数组内容是有原因的…

将

数据

转换为函数

var myApp = new Vue({
    el: "#app",
    data: function() {
        return {
            person: [this.thePerson()]
        }
    },
    methods: {
        thePerson: function() {
            return {
                personNickname: "Bob",
                personOwes: 0,
                paymentType: {
                    card: true,
                    cash: false
                }
            };
        }
    }
});

---

您是否尝试在Vue的创建方法上为人员赋值

根据你的例子：

    var myApp = new Vue({
  el: "#app",
  data: {
      person: []
  },
  methods: {
      thePerson: function() {
          return {
              personNickname: "Bob",
              personOwes: 0,
              paymentType: {
                  card: true,
                  cash: false
              }
          };
      }
  },
  created(){
    this.person.push(this.thePerson())
  }
});

---

这是函数的上下文。您在函数外部使用了
此
。如果您的代码在浏览器中运行，
此
将是
窗口
，而不是您的组件。始终将
数据
声明为函数，无论发生什么情况，即使您没有使用
此
。检查一下这个稍微构建的代码：computed方法输出的是“Undefined”，但是如果“this”现在是正确的上下文，那么为什么它是未定义的呢？您实际上没有使用computed属性。您正在使用未定义的变量
getFirstName
。您需要
这个.getFirstName
。请注意，这是一个属性，不是函数/方法，您不能用括号调用它。我看到了我修复的错误，但仍然不走运。我建立了一个非常清晰的代码笔，让你看看。。。似乎
数据
是在
计算的
之前计算的，所以不能在数据中引用计算的属性。这很有意义，因为计算属性是从
数据中派生的值。谢谢！这确实奏效了@eric guan请注意，这就是我解决问题的方式。