javascript - 未捕获的类型错误 : not a function when calling method from data in Vue

Question

当我运行此命令时，出现错误:“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
                }
            };
        }
    }
});

我不明白为什么!

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

Answer 1

将数据转换为函数。

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