Vue.js syntax error when returning object

Question

I am writing a simple blog application in Laravel with Vue. One of my return values is an object, but it is giving this error when I compile.

  SyntaxError: Unexpected token, expected ; (15:20)

  13 |         {
  14 |             blogposts: [],
> 15 |             blogpost:
     |                     ^
  16 |             {
  17 |                 id: '',
  18 |                 author: '',

Is this not how to return an object from the data function?

Per request, this is the actual .vue code.

<template>
    <div>
        <h2>Blog Posts</h2>
    </div>
</template>

<script>
    export default 
    {
        data()
        {
            return 
            {
                blogposts: [],
                blogpost:
                {
                    id: '',
                    author: '',
                    title: '',
                    body: ''
                },
                blogpost_id: '',
                pagination: {},
                edit: false
            };
        },

        created()
        {
            this.fetchBlogPosts();
        },

        methods:
        {
            fetchBlogPosts()
            {
                fetch('api/posts')
                    .then(res => res.json())
                    .then(res => {
                        console.log(res.data);
                    });
            }
        }

    };
</script>

Can you show your actual code for this as well? – Rwd Jun 05 '18 at 22:46 — Rwd, Jun 05 '18 at 22:46

score 1 · Accepted Answer · answered Jun 05 '18 at 22:56

1

The bracket must be on the same line of the return. Because the return symbol look for the code after him in same line. So you'r return return a blank line, so you have this error :)

 data()
    {
        return {   //Took the bracket here
            blogposts: [],
            blogpost:
            {
                id: '',
                author: '',
                title: '',
                body: ''
            },

You can use a linter to prevent this type of error (like eslint)

answered Jun 05 '18 at 22:56

Maxence Guyonvarho

140
1
7

I have to say that is a very odd restriction... especially for those of us who don't normally format that way. Thanks for the advice. – Jun 05 '18 at 22:59
I consider that a design flaw. It should be looking for `{` and return the object inside. IMHO – Jun 05 '18 at 23:01
@aserwin Basically you tumbled into one of the automatic semicolon insertion rules in Javascript. Here is another answer that details other areas you might want to be aware of. https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi – Bert Jun 06 '18 at 00:27

Vue.js syntax error when returning object

1 Answers1