Vue.js Vue语法错误：意外的令牌

我正在使用Vue和Nuxt构建应用程序，但是，在编译应用程序时遇到以下错误

这是我的密码：

<template>
  <nav class="flex items-center bg-green w-screen justify-between flex-wrap p-6">
    <section class="flex items-center flex-no-shrink mr-6">
      <nuxt-link to="/" class="block lg:inline-block text-white uppercase lg:mt-0 no-underline mr-4">Ben John Bagley</nuxt-link>
    </section>

    <section class="block lg:hidden">
      <button class="flex items-center p-2" @click="toggle">
        <i class="fal fa-bars text-white"></i>
      </button>
    </section>

    <section class="block text-left lg:flex w-full lg:items-center lg:w-auto lg:text-right" :class="open ? 'block': 'hidden'">
      <nuxt-link to="/about" class="block mt-3 lg:inline-block text-white lg:mt-0 no-underline mr-4">About</nuxt-link>
      <nuxt-link to="/works" class="block mt-3 lg:inline-block text-white lg:mt-0 no-underline mr-4">Works</nuxt-link>
      <nuxt-link to="/contact" class="inline-block text-sm px-4 py-2 leading-none text-white border border-green-dark bg-green-dark hover:bg-green-darker hover:border-green-darker rounded no-underline mt-4 mr-4 lg:mt-0">Contact</nuxt-link>
    </section>
  </nav>
</template>

<script>
export default {
  data: function () {
    open: false,
  },
  methods: {
    toggle() {
      this.open = !this.open
    }
  }
}
</script>

我确信这是一个简单的解决方案，但是，我确信这里需要逗号。

这个

  data: function () {
    open: false,
  }

应该是

  data: function () {
    return {
      open: false
    };
  }

数据是一个函数，因此您必须返回一个值，在本例中该值是一个对象。

  data: function () {
    open: false,
  }

应该是

  data: function () {
    return {
      open: false
    };
  }

---

数据是一个函数，因此您必须返回一个值，在本例中，该值是一个对象。

Ah，始终是小事情。非常感谢。啊，总是小事情。非常感谢。