錯誤 - Vue 組件中的意外標記

Question

我剛開始使用 Vue，並且在一個簡單的組件上遇到了一個頑固的錯誤。 首先，這是錯誤。

Syntax Error: SyntaxError: C:...src\components\Stats.vue: Unexpected token (20:2)

第 20 行：

18 |       newLink: '',
  19 |     },
> 20 |   },
     |   ^
  21 |   computed: {
  22 |     ...mapGetters([
  23 |       'countLinks',

這是代碼：

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Stats',
  data() {
    return {
      newLink: '',
    },
  },
  computed: {
    ...mapGetters([
      'countLinks',
    ]),
  },
  methods: {
    ...mapMutations([
      'ADD_LINK',
    ]),
    addLink: function () {
      this.ADD_LINK(this.newLink)
    },
  },
};
</script>

如您所見，錯誤引用了computed之前的第 20 行。 但是大括號和逗號都是必需的，所以我不確定可以做些什么來修復它。 似乎沒有任何地方可以像錯誤所暗示的那樣放置分號。

我還嘗試盡可能添加逗號，因為代碼之前抱怨缺少逗號。 然而，這也沒有解決問題。 我四處尋找解決方案，但沒有找到任何可行的方法。

---

只是為了更新，即使嘗試使用箭頭功能，此錯誤仍然存​​在：

data: ()  => ({
    newLink: '',
}),

像這樣使用function關鍵字：

data: function () {
  return {
    newLink: '',
  }
}

或者省略function並僅使用data作為函數本身，如下所示：

 data()  {
    return {
      newLink: '',
    }
  },

這些選項中的每一個都返回unexpected token或semicolon錯誤。 我幾乎嘗試了所有我能找到的解決方案，搜索了網絡，閱讀了文檔，但沒有找到任何可行的方法。

Answer 1

data必須是一個函數（ doc ），問題出在你的錯字上

應該是這個

data: function () {
  return {
    newLink: '',
  }
}

演示

Answer 2

這是您的代碼及其問題

import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Stats',
  data() {
    return {
      newLink: '', // 👈 unnecessary comma, syntactically ok
    }, // 👈 unnecessary comma, causes an error
  },
  computed: {
    ...mapGetters([ // 👈 no need for `...` here
      'countLinks', // 👈 unnecessary comma, syntactically ok
    ]), // 👈 unnecessary comma, syntactically ok
  },
  methods: {
    ...mapMutations([
      'ADD_LINK', // 👈 unnecessary comma, syntactically ok
    ]),
    addLink: function () {
      this.ADD_LINK(this.newLink)
    }, // 👈 unnecessary comma, syntactically ok
  }, // 👈 unnecessary comma, syntactically ok
};

一個主要問題是這個

data() {
  return {
    newLink: '',
  }, // 👈 this one right here
}

return試圖評估逗號運算符表達式並返回最后一個操作數。 問題是，沒有最后一個操作數。

這是您的代碼，已修復錯誤並刪除了所有不必要的元素

import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Stats',
  data () {
    return {
      newLink: ""
    }
  },
  computed: mapGetters(["countLinks"]),
  methods: {
    ...mapMutations(["ADD_LINK"]),
    addLink () {
      this.ADD_LINK(this.newLink)
    }
  }
}

您的data函數也可以寫成

data: () => ({ newLink: "" }),

但這真的取決於個人喜好。

Answer 3

https://stackoverflow.com/a/63985603/11022585

或使用箭頭功能。

data: ()  => ({
    newLink: '',
}),