Vue语法错误：意外令牌

Question

我使用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>

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

Answer 1

此

  data: function () {
    open: false,
  }

应该是

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

data是一个函数，所以你必须返回一个值，在这种情况下是一个对象。