Как решить синтаксическую ошибку Vue?

Question

[Kotaro Hiba]

Добрый день хабрчане, столкнулся с такой проблемой что не могу проверить наличие ключа в объекте таким способом в template

<div class="product-profile-info__balance">
              £{{productProfileCreditInfo?.balance}}
            </div>

productProfileCreditInfo?.balance
приходится делать вот такую конструкцию
productProfileCreditInfo && productProfileCreditInfo.balance
Получаю вот такую ошибку

Failed to compile with 1 error                                                                                                                                                                                                                18:47:00

 error  in ./src/views/CustomerProductProfile.vue?vue&type=template&id=9c19c81c&

Syntax Error: Unexpected token (7:1463)


 @ ./src/views/CustomerProductProfile.vue?vue&type=template&id=9c19c81c& 1:0-427 1:0-427
 @ ./src/views/CustomerProductProfile.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.78:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

мой packagejson

{
  "name": "ttmm-backoffice",
  "version": "0.2.7",
  "private": true,
  "scripts": {
    "serve": "node scripts/updateVersion.js && vue-cli-service serve",
    "build": "node scripts/updateVersion.js && vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@livelybone/vue-datepicker": "^4.0.2",
    "@mdi/font": "^5.5.55",
    "@types/md5": "^2.2.0",
    "axios": "^0.21.1",
    "buefy": "^0.9.2",
    "current-git-branch": "^1.1.0",
    "i": "^0.3.6",
    "materialize-css": "^1.0.0",
    "md5": "^2.3.0",
    "moment": "^2.29.1",
    "npm": "^6.14.8",
    "portal-vue": "^2.1.7",
    "register-service-worker": "^1.7.1",
    "v-click-outside": "^3.1.2",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "vue-router": "^3.2.0",
    "vuelidate": "^0.7.6",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0",
    "vuex-class": "^0.3.2"
  },
  "devDependencies": {
    "@types/current-git-branch": "^1.1.1",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "sass": "^1.32.0",
    "sass-loader": "^10.0.0",
    "style-resources-loader": "^1.4.1",
    "typescript": "~3.9.3",
    "vue-cli-plugin-style-resources-loader": "~0.1.5",
    "vue-cli-plugin-vuetify": "~2.3.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }
}

подскажите как решить или где посмотреть решение

Comments

[MikUrrey]

А как у вас в итоге вся интерполяция выглядит? Так?

{{productProfileCreditInfo&&productProfileCreditInfo.balance ? productProfileCreditInfo.balance : ""}}

[Kotaro Hiba]

MikUrrey, да

Answer 1

[Evgeny Kulakov]

Похоже нет поддержки optional chaining в шаблонах - https://github.com/vuejs/vue/issues/11088

Comments

[Aetae]

Какой ужасный issue, сколько чудовищных и мерзких костылей, 0_o.

Answer 2

[Aetae]

Проблема в том, что js в шаблонах Vue 2 - это не совсем js, а особый сабсет, обрабатываемый vue-loader'ом(посредством vue-template-compiler'а). Соответственно, никакой babel к нему не применяется, а писался он до того как придумали optional chaining. Как раз из-за таких подлянок в Vue 3 отказались от такого подхода(а за одно выкинули фильтры, собаки).

Быстрый поиск сразу выдал vue-nullable-loader - эта хрень на регулярках, а не на анализе AST, так что возможны глюки, но в целом должно работать.

P.S. Вообще странно, что никто не сделал этого как module для vue-template-compiler...

Answer 3

[MikUrrey]

Если productProfileCreditInfo всегда объект, когда он определен, то обычно работает такое:
{{productProfileCreditInfo? productProfileCreditInfo.balance : ""}}
то есть при отсутствии свойства в объекте оно просто не выведется, и это не приведет к исключению.