Синтаксическая ошибка Vue.js при возврате объекта

Question

Я пишу простое приложение для блогов на Laravel с помощью Vue.Одним из моих возвращаемых значений является объект, но он выдает эту ошибку при компиляции.

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

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

Разве это не как вернуть объект из функции data?

Взапрос, это фактический .vue код.

<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>

Answer 1

Скобка должна быть на одной линии возврата.Потому что символ возврата ищите код после него в той же строке.Таким образом, вы вернетесь, верните пустую строку, поэтому у вас будет эта ошибка :)

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

Вы можете использовать линтер для предотвращения ошибок такого типа (например, eslint)