vue数据功能语法

Question

编译资产时出现以下语法错误：

Syntax Error: SyntaxError: C:\xampp\htdocs\dtcburger.com\resources\js\components\stripe\STRIPEform3.vue: Unexpected token, expected ";" (51:12)

  49 |     {
  50 |     stripe:null,
> 51 |     stripePK: stripePK,
     |             ^
  52 |     stripeStyles: stripeStyles,
  53 |     cardNumberElement:null,
  54 |     cardExpiryElement:null,

这是我的代码的样子，是因为我对组件数据使用了ES语法？

Answer 1

您需要返回对象-将函数包装在括号中，然后简单地返回对象文字：

data: () => (
  {
    stripe: null,
    stripePK: stripePK,
    //All your other properties
  }
)

或者，使用return语句：

data: () => {
  return {
    stripe: null,
    stripePK: stripePK
    //All your other properties
  }
}

Answer 2

导致该错误的主要原因是因为{}被解释为代码块而不是对象文字。如果仔细看，第一个stripe:null,属性上没有红色的波浪状下划线。因为，它被解释为labeled statement。

这不会引发错误：

{
  stripe: null
}

这会引发错误，提示Unexpected token :

{
  stripe: null,
  stripePK: "stripePK"
}

要修复代码，您需要从功能中return

data: () => {
  return {
    stripe: null,
    stripePK: stripePK,
    ...
  }
}

OR，implicitly return，通过将对象文字括在括号中从箭头函数中获得：

data: () => ({
  stripe: null,
  stripePK: stripePK,
  ...
})

Answer 3

您应该在数据函数内部返回一个对象，如：

   data:()=>{
      return  {
          stripe:null,
          stripePK: stripePK
          ...
         }
     }