未捕获的 TypeError：从 Vue 中的数据调用方法时不是函数答案

【问题标题】：Uncaught TypeError: not a function when calling method from data in Vue未捕获的 TypeError：从 Vue 中的数据调用方法时不是函数
【发布时间】：2018-08-14 02:13:35
【问题描述】：

当我运行这个时，我得到一个错误：“Uncaught TypeError: this.thePerson is not a function”：

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

我不知道为什么！

附：我意识到这是看起来很奇怪的代码，但我使用函数返回数组内容是有原因的......

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

把data变成一个函数。

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
                }
            };
        }
    }
});

【讨论】：

this 是函数的上下文。您在函数之外使用了this。如果您的代码在浏览器中运行，this 将是 window，而不是您的组件。无论如何，始终将data 声明为函数，即使您没有使用this。 vuejs.org/v2/api/#data
查看这个稍微内置的代码：jsfiddle.net/k0cxth61/1 计算方法输出“未定义”，但如果“this”现在是正确的上下文，那么为什么它未定义？
您实际上并没有使用计算属性。您正在使用未定义的变量getFirstName。你想要this.getFirstName。请注意，它是一个属性，而不是一个函数/方法，你不能用括号来调用它。
我看到了我修复的错误，但仍然没有运气。我在一个非常清晰的 CodePen 中构建了这个供您查看...codepen.io/rettoy/pen/ejoKmq
似乎data 在computed 之前被评估，因此您不能在数据中引用计算属性。这是有道理的，因为计算属性是从data 派生的值。

【解决方案2】：

您是否尝试在 Vue 的 created 方法上分配 person 值？

根据你的例子：

    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())
  }
});

【讨论】：

谢谢！这实际上奏效了。 @eric-guan 请看这是我解决问题的方法。