Uncaught TypeError: not a function when calling method from data in Vue

Question

I get an error: "Uncaught TypeError: this.thePerson is not a function" when I run this:

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

I can't figure out why!

P.S. I realize this is weird looking code but there's a reason why I'm using a function to return the array contents...

Eric Guan · Accepted Answer · 2018-08-14 02:26:38Z

6

Turn data into a function.

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

answered Aug 14, 2018 at 2:26

Eric Guan

16.1k10 gold badges53 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Eric Guan Over a year ago

this is the context of a function. You were using this outside of a function. If your code ran in the browser, this would be window, and not your component. Always declare data as a function, no matter what, even if you aren't using this. vuejs.org/v2/api/#data

portnoy-the-elder Over a year ago

Check out this slightly built-out code: jsfiddle.net/k0cxth61/1 The computed method is outputting "Undefined" but if "this" is now the correct context then why is it undefined?

Eric Guan Over a year ago

You're not actually using the computed property. You're using the variable getFirstName which is undefined. You want this.getFirstName. Notice that it's a property, not a function/method, you don't call it with parentheses.

portnoy-the-elder Over a year ago

I see that error which I fixed but still no luck. I built this in a very clear CodePen for you to look at... codepen.io/rettoy/pen/ejoKmq

Eric Guan Over a year ago

Seems like data is evaluated before computed is, so you can't reference computed properties in data. Which makes sense, since computed properties are derived values from data.

Facundo Petre · Accepted Answer · 2018-08-14 02:28:04Z

2

Do you try, assigning persons value on Vue's created method ?

according to your example:

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

answered Aug 14, 2018 at 2:28

Facundo Petre

4614 silver badges5 bronze badges

1 Comment

portnoy-the-elder Over a year ago

Thanks! This actually worked. @eric-guan please see that this is how I solved the problem.

Collectives™ on Stack Overflow

Uncaught TypeError: not a function when calling method from data in Vue

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related