Синтаксис функции данных 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, свойстве нет красного волнистого подчеркивания. Потому что это интерпретируется как помеченный оператор .

Это не выдает ошибку:

{
  stripe: null
}

Это выдает ошибку, говорящую Unexpected token :

{
  stripe: null,
  stripePK: "stripePK"
}

Чтобы исправить ваш код, вам нужно либо return из функции

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

ИЛИ неявно возвращает из функции стрелки, заключая литерал объекта в скобки:

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

Answer 3

Вы должны вернуть объект внутри функции данных как:

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