How to solve Vue syntax error?

Question

Vue.js

Good afternoon, habrchane, I ran into such a problem that I can’t check for the presence of a key in an object in this way in the template

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

productProfileCreditInfo?.balance I
have to do this construction
productProfileCreditInfo && productProfileCreditInfo.balance
I get this error

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

my 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"
  }
}

tell me how to solve or where to look for a solution

Answer 1

Looks like there is no support for optional chaining in templates - https://github.com/vuejs/vue/issues/11088

Answer 2

If productProfileCreditInfo is always an object when defined, then
{{productProfileCreditInfo? productProfileCreditInfo.balance : ""}}
i.e. if the property does not exist in the object, it will simply not be displayed, and this will not result in an exception.