0

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>
Improve this question
1
  • Can you show your actual code for this as well? Commented Jun 5, 2018 at 22:46

1 Answer 1

Reset to default
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)

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

3 Comments

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.
I consider that a design flaw. It should be looking for { and return the object inside. IMHO
@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. stackoverflow.com/questions/2846283/…