Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sondra Coffin
Sondra Coffin
6,909 Points

[Vue.js Basics] Syntax for adding functions to methods object?

Is there a difference between these two ways of writing a new function in the Vue instance's methods object, or is it just a matter of preference which syntax you use? The instructor uses the top syntax, but I think the bottom syntax is cleaner; is there a benefit to using one or the other? Example: Writing a function called toggleCard

methods: {
     toggleCard: function(card) {
          // do stuff
     }

    toggleCard(card) {
          // do stuff
     }
}

1 Answer

Michael Cook
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points
Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points

Have you tried using the bottom syntax? I'm not sure it would even work. Vue's methods object is just that, an object - so it has keys and values. The key is the name of the method you define, the value is the method body. Here's what happens if you try to declare a function inside a method without assigning it as the value of a key: 

const methods = {
    function foo() {
        // do something
    }
}
Uncaught SyntaxError: Unexpected identifier

I would suggest using the syntax Treasure uses.